Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ef70eef

Browse filesBrowse files
tordextordex
committed
flexbox rendering fixes
1 parent f195ffb commit ef70eef
Copy full SHA for ef70eef
Expand file treeCollapse file tree

15 files changed

+75
-34
lines changed

‎include/litehtml/render_item.h

Copy file name to clipboardExpand all lines: include/litehtml/render_item.h
+20-4Lines 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

Copy file name to clipboardExpand all lines: src/flex_item.cpp
+20-8Lines 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

Copy file name to clipboardExpand all lines: src/render_block.cpp
+15-1Lines 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

Copy file name to clipboardExpand all lines: src/render_item.cpp
+20-21Lines 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

Copy file name to clipboard
File renamed without changes.

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

Copy file name to clipboard
File renamed without changes.

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

Copy file name to clipboard
1.15 KB
Loading

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

Copy file name to clipboard
File renamed without changes.

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

Copy file name to clipboard
1.09 KB
Loading

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

Copy file name to clipboard
File renamed without changes.

‎test/render/flex/flexbox-align-self-vert-001.htm.png

Copy file name to clipboard
1.12 KB
Loading

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

Copy file name to clipboard
File renamed without changes.

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

Copy file name to clipboard
616 Bytes
Loading

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

Copy file name to clipboard
File renamed without changes.

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

Copy file name to clipboard
805 Bytes
Loading

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.