fix(ui): correct the width calculation when max width is valid

lib/ui/src/ui_flexbox_layout.c

@@ -500,7 +500,7 @@ static void ui_flexbox_layout_update_column(ui_flexbox_layout_context_t *ctx)
  if (align_items == CSS_ALIGN_ITEMS_STRETCH &&
  s->type_bits.width == CSS_HEIGHT_AUTO) {
  CSS_SET_FIXED_LENGTH(s, width,
- css_convert_border_box_height(
+ css_convert_border_box_width(
  s, ctx->line->max_cross_size -
  css_margin_x(s)));
  }
@@ -518,7 +518,7 @@ static void ui_flexbox_layout_update_column(ui_flexbox_layout_context_t *ctx)
  }
 #endif
 
- // 计算 marign-top 和 margin-bottom
+ // 计算 margin-top 和 margin-bottom
  if (space > 0 && ctx->line->count_of_auto_margin_items > 0) {
  main_axis = 0;
  k = space / ctx->line->count_of_auto_margin_items;

lib/ui/src/ui_updater.c

@@ -297,16 +297,35 @@ static size_t ui_widget_update_children(ui_widget_t* w)
 
 static void ui_widget_update_size(ui_widget_t* w)
 {
- css_computed_style_t *src = &w->specified_style;
- css_computed_style_t *dest = &w->computed_style;
+ css_unit_t unit;
+ css_numeric_value_t limit;
+ css_computed_style_t* src = &w->specified_style;
+ css_computed_style_t* dest = &w->computed_style;
 
- CSS_COPY_LENGTH(dest, src, width);
- CSS_COPY_LENGTH(dest, src, height);
- ui_widget_compute_style(w);
- ui_widget_update_box_size(w);
+ CSS_COPY_LENGTH(dest, src, width);
+ CSS_COPY_LENGTH(dest, src, height);
+ ui_widget_compute_style(w);
+ ui_widget_update_box_size(w);
  ui_widget_reflow(w);
  w->max_content_width = w->content_box.width;
  w->max_content_height = w->content_box.height;
+ if (css_computed_max_width(dest, &limit, &unit) == CSS_MAX_WIDTH_SET &&
+ unit == CSS_UNIT_PX) {
+ w->max_content_width = limit;
+ } else if (css_computed_min_width(dest, &limit, &unit) ==
+ CSS_MIN_WIDTH_SET &&
+ unit == CSS_UNIT_PX && w->max_content_width < limit) {
+ w->max_content_width = limit;
+ }
+ if (css_computed_max_height(dest, &limit, &unit) ==
+ CSS_MAX_HEIGHT_SET &&
+ unit == CSS_UNIT_PX) {
+ w->max_content_width = limit;
+ } else if (css_computed_min_height(dest, &limit, &unit) ==
+ CSS_MIN_HEIGHT_SET &&
+ unit == CSS_UNIT_PX && w->max_content_height < limit) {
+ w->max_content_height = limit;
+ }
 }
 
 size_t ui_widget_update(ui_widget_t* w)
@@ -354,7 +373,8 @@ size_t ui_widget_update(ui_widget_t* w)
  float width = w->border_box.width;
  float height = w->border_box.height;
  ui_widget_update_size(w);
- // 只需要判断宽高的变化，因为 style diff 已经判断了位置变化
+ // 只需要判断宽高的变化，因为 style diff
+ // 已经判断了位置变化
  if (width != w->border_box.width ||
  height != w->border_box.height) {
  ui_widget_request_reflow(w->parent);

lib/ui/src/ui_widget_box.c

@@ -134,26 +134,16 @@ void ui_widget_update_box_size(ui_widget_t *w)
  w->content_box.height = s->height;
  } else {
  w->content_box.width =
- s->width - (s->padding_left + s->padding_right +
- s->border_left_width + s->border_right_width);
+ s->width - css_padding_x(s) - css_border_x(s);
  w->content_box.height =
- s->height - (s->padding_top + s->padding_bottom +
- s->border_top_width + s->border_bottom_width);
+ s->height - css_padding_y(s) - css_border_y(s);
  }
- w->border_box.width = w->content_box.width +
- (s->padding_left + s->padding_right +
- s->border_left_width + s->border_right_width);
- w->border_box.height = w->content_box.height +
- (s->padding_top + s->padding_bottom +
- s->border_top_width + s->border_bottom_width);
- w->padding_box.width =
- w->content_box.width + s->padding_left + s->padding_right;
- w->padding_box.height =
- w->content_box.height + s->padding_top + s->padding_bottom;
- w->outer_box.width =
- w->border_box.width + s->margin_left + s->margin_right;
- w->outer_box.height =
- w->border_box.height + s->margin_top + s->margin_bottom;
+ w->padding_box.width = w->content_box.width + css_padding_x(s);
+ w->padding_box.height = w->content_box.height + css_padding_y(s);
+ w->border_box.width = w->padding_box.width + css_border_x(s);
+ w->border_box.height = w->padding_box.height + css_border_y(s);
+ w->outer_box.width = w->border_box.width + css_margin_x(s);
+ w->outer_box.height = w->border_box.height + css_margin_y(s);
  ui_widget_update_canvas_box_width(w);
  ui_widget_update_canvas_box_height(w);
 }

tests/cases/test_flex_layout.c

@@ -448,20 +448,20 @@ static void test_browser_layout(void)
 
  w = ui_get_widget("browser-frame-client");
  ctest_equal_int("$('#browser-frame-client')[0].height", (int)w->border_box.height,
- 224);
+ 223);
  w = ui_get_widget("browser-frame-content");
  ctest_equal_int("$('#browser-frame-content')[0].height", (int)w->border_box.height,
- 224);
+ 223);
  w = ui_get_widget("browser-page-home");
  ctest_equal_int("$('#browser-page-home')[0].height", (int)w->border_box.height,
- 224);
+ 223);
  w = ui_get_widget("browser-page-home-container");
  rect.width = 256;
  rect.height = 70;
  rect.x =
  (538.f - rect.width) / 2.f + w->parent->computed_style.padding_left;
  rect.y =
- (204.f - rect.height) / 2.f + w->parent->computed_style.padding_top;
+ (203.f - rect.height) / 2.f + w->parent->computed_style.padding_top;
  ctest_equal_ui_rect("$('#browser-page-home-container')[0].border_box",
  &w->border_box, &rect);
 }

tests/test_flex_layout.css

@@ -268,6 +268,7 @@ body {
  display: flex;
  padding: 5px 8px;
  border-bottom: 1px solid #e9ecef;
+ line-height: 22px;
 }
 
 .example-browser .v-frame {

tests/test_text_resize.c

@@ -8,8 +8,8 @@ int main(int argc, char *argv[])
 
  build();
  lcui_set_timeout(2000, test_text_set_content, NULL);
- lcui_set_timeout(4000, test_text_set_short_content_css, NULL);
- lcui_set_timeout(6000, test_text_set_long_content_css, NULL);
+ lcui_set_timeout(3000, test_text_set_short_content_css, NULL);
+ lcui_set_timeout(4000, test_text_set_long_content_css, NULL);
 
  return lcui_main();
 }

tests/xmake.lua

@@ -1,6 +1,7 @@
 add_deps("lcui")
 set_default(false)
 set_rundir("./")
+add_includedirs("./include")
 
 target("test_block_layout")
  add_files("test_block_layout.c")