beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-30 00:31:14 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Support box-sizing in flex formatting context

Browse source 
Makes pass 8/10 tests in https://wpt.live/css/css-flexbox/box-sizing-001.html
This commit is contained in:
Aliaksandr Kalenik 2022-11-27 10:08:05 +03:00 committed by Andreas Kling
parent 0c4befd811
commit 1c1b750bff
Notes: sideshowbarker 2024-07-17 04:00:37 +09:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/SerenityOS/serenity/commit/1c1b750bff
Pull-request: https://github.com/SerenityOS/serenity/pull/16220
1 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -42,6 +42,14 @@ float FlexFormattingContext::get_pixel_width(Box const& box, Optional<CSS::Size>
if (!size.has_value())
return 0;
auto inner_width = CSS::Length::make_px(containing_block_width_for(box));
float border_left = box.computed_values().border_left().width;
float border_right = box.computed_values().border_right().width;
float padding_left = box.computed_values().padding().left().resolved(box, inner_width).to_px(box);
float padding_right = box.computed_values().padding().right().resolved(box, inner_width).to_px(box);
if (box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
return size->resolved(box, inner_width).to_px(box) - border_left - border_right - padding_left - padding_right;
}
return size->resolved(box, inner_width).to_px(box);
}
@ -50,6 +58,14 @@ float FlexFormattingContext::get_pixel_height(Box const& box, Optional<CSS::Size
if (!length_percentage.has_value())
return 0;
auto inner_height = CSS::Length::make_px(containing_block_height_for(box));
float border_top = box.computed_values().border_top().width;
float border_bottom = box.computed_values().border_bottom().width;
float padding_top = box.computed_values().padding().top().resolved(box, inner_height).to_px(box);
float padding_bottom = box.computed_values().padding().bottom().resolved(box, inner_height).to_px(box);
if (box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
return length_percentage->resolved(box, inner_height).to_px(box) - border_top - border_bottom - padding_top - padding_bottom;
}
return length_percentage->resolved(box, inner_height).to_px(box);
}
@ -1057,7 +1073,21 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem&
// If we have a definite cross size, this is easy! No need to perform layout, we can just use it as-is.
if (has_definite_cross_size(item.box)) {
item.hypothetical_cross_size = css_clamp(resolved_definite_cross_size(item), clamp_min, clamp_max);
// To avoid subtracting padding and border twice for `box-sizing: border-box` only min and max clamp should happen on a second pass
if (resolve_percentage_min_max_sizes) {
item.hypothetical_cross_size = css_clamp(item.hypothetical_cross_size, clamp_min, clamp_max);
return;
}
float cross_size = [&]() {
if (item.box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
return max(0.0f, resolved_definite_cross_size(item) - item.padding.cross_before - item.padding.cross_after - item.borders.cross_before - item.borders.cross_after);
}
return resolved_definite_cross_size(item);
}();
item.hypothetical_cross_size = css_clamp(cross_size, clamp_min, clamp_max);
return;
}