Skip to content

Commit ef70eef

Browse files
tordextordex
committed
flexbox rendering fixes
1 parent f195ffb commit ef70eef

15 files changed

+75
-34
lines changed

‎include/litehtml/render_item.h‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,12 +224,20 @@ namespace litehtml
224224

225225
int box_sizing_left() const
226226
{
227-
return m_padding.left + m_borders.left;
227+
if(css().get_box_sizing() == box_sizing_border_box)
228+
{
229+
return m_padding.left + m_borders.left;
230+
}
231+
return 0;
228232
}
229233

230234
int box_sizing_right() const
231235
{
232-
return m_padding.right + m_borders.right;
236+
if(css().get_box_sizing() == box_sizing_border_box)
237+
{
238+
return m_padding.right + m_borders.right;
239+
}
240+
return 0;
233241
}
234242

235243
int box_sizing_width() const
@@ -239,12 +247,20 @@ namespace litehtml
239247

240248
int box_sizing_top() const
241249
{
242-
return m_padding.top + m_borders.top;
250+
if(css().get_box_sizing() == box_sizing_border_box)
251+
{
252+
return m_padding.top + m_borders.top;
253+
}
254+
return 0;
243255
}
244256

245257
int box_sizing_bottom() const
246258
{
247-
return m_padding.bottom + m_borders.bottom;
259+
if(css().get_box_sizing() == box_sizing_border_box)
260+
{
261+
return m_padding.bottom + m_borders.bottom;
262+
}
263+
return 0;
248264
}
249265

250266
int box_sizing_height() const

‎src/flex_item.cpp‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -234,8 +234,13 @@ void litehtml::flex_item_row_direction::align_stretch(flex_line &ln, const conta
234234
set_cross_position(ln.cross_start);
235235
if (el->css().get_height().is_predefined())
236236
{
237-
// TODO: must be rendered into the specified height
238-
el->pos().height = ln.cross_size - el->content_offset_height();
237+
el->render(el->left(), el->top(), self_size.new_width_height(
238+
el->pos().width + el->box_sizing_width(),
239+
ln.cross_size - el->content_offset_height() + el->box_sizing_height(),
240+
containing_block_context::size_mode_exact_width |
241+
containing_block_context::size_mode_exact_height
242+
), fmt_ctx);
243+
apply_main_auto_margins();
239244
}
240245
}
241246

@@ -337,6 +342,7 @@ void litehtml::flex_item_column_direction::direction_specific_init(const litehtm
337342
{
338343
base_size = el->css().get_flex_basis().calc_percent(self_size.height) +
339344
el->content_offset_height();
345+
base_size = std::max(base_size, min_size);
340346
}
341347
}
342348

@@ -397,18 +403,17 @@ void litehtml::flex_item_column_direction::align_stretch(flex_line &ln, const co
397403
{
398404
el->render(ln.cross_start,
399405
el->pos().y - el->content_offset_top(),
400-
self_size.new_width_height(ln.cross_size,
401-
main_size -
402-
el->content_offset_height(),
406+
self_size.new_width_height(ln.cross_size - el->content_offset_width() + el->box_sizing_width(),
407+
main_size - el->content_offset_height() + el->box_sizing_height(),
403408
containing_block_context::size_mode_exact_height),
404409
fmt_ctx, false);
405410
} else
406411
{
407412
el->render(ln.cross_start,
408413
el->pos().y - el->content_offset_top(),
409414
self_size.new_width_height(
410-
ln.cross_size - el->content_offset_width(),
411-
main_size - el->content_offset_height(),
415+
ln.cross_size - el->content_offset_width() + el->box_sizing_width(),
416+
main_size - el->content_offset_height() + el->box_sizing_height(),
412417
containing_block_context::size_mode_exact_width |
413418
containing_block_context::size_mode_exact_height),
414419
fmt_ctx, false);
@@ -421,7 +426,14 @@ void litehtml::flex_item_column_direction::align_baseline(litehtml::flex_line &l
421426
const containing_block_context &self_size,
422427
formatting_context *fmt_ctx)
423428
{
424-
align_stretch(ln, self_size, fmt_ctx);
429+
// The fallback alignment for first baseline is start, the one for last baseline is end.
430+
if(align & flex_align_items_last)
431+
{
432+
set_cross_position(ln.cross_start + ln.cross_size - get_el_cross_size());
433+
} else
434+
{
435+
set_cross_position(ln.cross_start);
436+
}
425437
}
426438

427439
int litehtml::flex_item_column_direction::get_el_main_size()

‎src/render_block.cpp‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,9 @@ int litehtml::render_item_block::_render(int x, int y, const containing_block_co
234234
m_pos.width = self_size.min_width;
235235
requires_rerender = true;
236236
}
237+
} else if(m_pos.width < 0)
238+
{
239+
m_pos.width = 0;
237240
}
238241

239242
// Fix width with max-width attribute
@@ -264,7 +267,15 @@ int litehtml::render_item_block::_render(int x, int y, const containing_block_co
264267
if (self_size.height.type != containing_block_context::cbc_value_type_auto &&
265268
!(containing_block_size.size_mode & containing_block_context::size_mode_content))
266269
{
267-
if (self_size.height > 0)
270+
// TODO: Something wrong here
271+
// Percentage height from undefined containing block height is usually <= 0
272+
if(self_size.height.type == containing_block_context::cbc_value_type_percentage)
273+
{
274+
if (self_size.height > 0)
275+
{
276+
m_pos.height = self_size.height;
277+
}
278+
} else
268279
{
269280
m_pos.height = self_size.height;
270281
}
@@ -299,6 +310,9 @@ int litehtml::render_item_block::_render(int x, int y, const containing_block_co
299310
{
300311
m_pos.height = self_size.min_height;
301312
}
313+
} else if(m_pos.height < 0)
314+
{
315+
m_pos.height = 0;
302316
}
303317

304318
// Fix width with max-width attribute

‎src/render_item.cpp‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1074,28 +1074,27 @@ litehtml::containing_block_context litehtml::render_item::calculate_containing_b
10741074
calc_cb_length(src_el()->css().get_min_height(), cb_context.height, ret.min_height);
10751075
calc_cb_length(src_el()->css().get_max_height(), cb_context.height, ret.max_height);
10761076

1077-
if (src_el()->css().get_box_sizing() == box_sizing_border_box)
1077+
// Fix box sizing
1078+
if(ret.width.type != containing_block_context::cbc_value_type_auto)
10781079
{
1079-
if(ret.width.type != containing_block_context::cbc_value_type_auto)
1080-
{
1081-
ret.render_width = ret.width - box_sizing_width();
1082-
}
1083-
if(ret.min_width.type != containing_block_context::cbc_value_type_none)
1084-
{
1085-
ret.min_width.value -= box_sizing_width();
1086-
}
1087-
if(ret.max_width.type != containing_block_context::cbc_value_type_none)
1088-
{
1089-
ret.max_width.value -= box_sizing_width();
1090-
}
1091-
if(ret.min_height.type != containing_block_context::cbc_value_type_none)
1092-
{
1093-
ret.min_height.value -= box_sizing_height();
1094-
}
1095-
if(ret.max_height.type != containing_block_context::cbc_value_type_none)
1096-
{
1097-
ret.max_height.value -= box_sizing_height();
1098-
}
1080+
ret.render_width = ret.width - box_sizing_width();
10991081
}
1082+
if(ret.min_width.type != containing_block_context::cbc_value_type_none)
1083+
{
1084+
ret.min_width.value -= box_sizing_width();
1085+
}
1086+
if(ret.max_width.type != containing_block_context::cbc_value_type_none)
1087+
{
1088+
ret.max_width.value -= box_sizing_width();
1089+
}
1090+
if(ret.min_height.type != containing_block_context::cbc_value_type_none)
1091+
{
1092+
ret.min_height.value -= box_sizing_height();
1093+
}
1094+
if(ret.max_height.type != containing_block_context::cbc_value_type_none)
1095+
{
1096+
ret.max_height.value -= box_sizing_height();
1097+
}
1098+
11001099
return ret;
11011100
}

test/render/flex/table-as-item-narrow-content-2.htm renamed to test/render/flex/--table-as-item-narrow-content-2.htm

File renamed without changes.

test/render/flex/--flexbox-align-self-horiz-003.htm renamed to test/render/flex/flexbox-align-self-horiz-003.htm

File renamed without changes.

‎test/render/flex/flexbox-align-self-horiz-003.htm.png‎

1.15 KB
Loading

test/render/flex/--flexbox-align-self-horiz-004.htm renamed to test/render/flex/flexbox-align-self-horiz-004.htm

File renamed without changes.

‎test/render/flex/flexbox-align-self-horiz-004.htm.png‎

1.09 KB
Loading

test/render/flex/--flexbox-align-self-vert-001.htm renamed to test/render/flex/flexbox-align-self-vert-001.htm

File renamed without changes.

0 commit comments

Comments
 (0)