mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 04:27:43 +00:00
LibWeb: Convert width/height and min-/max- versions to LengthPercentage
A lot of this is quite ugly, but it should only be so until I remove Length::Type::Percentage entirely. (Which should happen later in this PR, otherwise, yell at me!) For now, a lot of things have to be resolved twice, first from a LengthPercentage to a Length, and then from a Length to a pixel one.
This commit is contained in:
parent
cb0cce5cdc
commit
dc681913e8
12 changed files with 276 additions and 194 deletions
|
@ -122,18 +122,19 @@ void BlockFormattingContext::compute_width(Box& box)
|
|||
|
||||
auto& computed_values = box.computed_values();
|
||||
float width_of_containing_block = box.containing_block()->width();
|
||||
auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
|
||||
|
||||
auto zero_value = CSS::Length::make_px(0);
|
||||
|
||||
auto margin_left = CSS::Length::make_auto();
|
||||
auto margin_right = CSS::Length::make_auto();
|
||||
const auto padding_left = computed_values.padding().left.resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_right = computed_values.padding().right.resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_left = computed_values.padding().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_right = computed_values.padding().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
|
||||
auto try_compute_width = [&](const auto& a_width) {
|
||||
CSS::Length width = a_width;
|
||||
margin_left = computed_values.margin().left.resolved_or_zero(box, width_of_containing_block);
|
||||
margin_right = computed_values.margin().right.resolved_or_zero(box, width_of_containing_block);
|
||||
margin_left = computed_values.margin().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
margin_right = computed_values.margin().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
|
||||
float total_px = computed_values.border_left().width + computed_values.border_right().width;
|
||||
for (auto& value : { margin_left, padding_left, width, padding_right, margin_right }) {
|
||||
|
@ -207,14 +208,14 @@ void BlockFormattingContext::compute_width(Box& box)
|
|||
return width;
|
||||
};
|
||||
|
||||
auto specified_width = computed_values.width().resolved_or_auto(box, width_of_containing_block);
|
||||
auto specified_width = computed_values.width().resolved(width_of_containing_block_as_length).resolved_or_auto(box, width_of_containing_block);
|
||||
|
||||
// 1. The tentative used width is calculated (without 'min-width' and 'max-width')
|
||||
auto used_width = try_compute_width(specified_width);
|
||||
|
||||
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
|
||||
// but this time using the computed value of 'max-width' as the computed value for 'width'.
|
||||
auto specified_max_width = computed_values.max_width().resolved_or_auto(box, width_of_containing_block);
|
||||
auto specified_max_width = computed_values.max_width().resolved(width_of_containing_block_as_length).resolved_or_auto(box, width_of_containing_block);
|
||||
if (!specified_max_width.is_auto()) {
|
||||
if (used_width.to_px(box) > specified_max_width.to_px(box)) {
|
||||
used_width = try_compute_width(specified_max_width);
|
||||
|
@ -223,7 +224,7 @@ void BlockFormattingContext::compute_width(Box& box)
|
|||
|
||||
// 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
|
||||
// but this time using the value of 'min-width' as the computed value for 'width'.
|
||||
auto specified_min_width = computed_values.min_width().resolved_or_auto(box, width_of_containing_block);
|
||||
auto specified_min_width = computed_values.min_width().resolved(width_of_containing_block_as_length).resolved_or_auto(box, width_of_containing_block);
|
||||
if (!specified_min_width.is_auto()) {
|
||||
if (used_width.to_px(box) < specified_min_width.to_px(box)) {
|
||||
used_width = try_compute_width(specified_min_width);
|
||||
|
@ -244,12 +245,13 @@ void BlockFormattingContext::compute_width_for_floating_box(Box& box)
|
|||
// 10.3.5 Floating, non-replaced elements
|
||||
auto& computed_values = box.computed_values();
|
||||
float width_of_containing_block = box.containing_block()->width();
|
||||
auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
|
||||
auto zero_value = CSS::Length::make_px(0);
|
||||
|
||||
auto margin_left = computed_values.margin().left.resolved_or_zero(box, width_of_containing_block);
|
||||
auto margin_right = computed_values.margin().right.resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_left = computed_values.padding().left.resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_right = computed_values.padding().right.resolved_or_zero(box, width_of_containing_block);
|
||||
auto margin_left = computed_values.margin().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
auto margin_right = computed_values.margin().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_left = computed_values.padding().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_right = computed_values.padding().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
|
||||
// If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
|
||||
if (margin_left.is_auto())
|
||||
|
@ -257,7 +259,7 @@ void BlockFormattingContext::compute_width_for_floating_box(Box& box)
|
|||
if (margin_right.is_auto())
|
||||
margin_right = zero_value;
|
||||
|
||||
auto width = computed_values.width().resolved_or_auto(box, width_of_containing_block);
|
||||
auto width = computed_values.width().resolved(width_of_containing_block_as_length).resolved_or_auto(box, width_of_containing_block);
|
||||
|
||||
// If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
|
||||
if (width.is_auto()) {
|
||||
|
@ -290,31 +292,36 @@ void BlockFormattingContext::compute_width_for_block_level_replaced_element_in_n
|
|||
box.set_width(compute_width_for_replaced_element(box));
|
||||
}
|
||||
|
||||
float BlockFormattingContext::compute_theoretical_height(const Box& box)
|
||||
float BlockFormattingContext::compute_theoretical_height(Box const& box)
|
||||
{
|
||||
auto& computed_values = box.computed_values();
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto containing_block_height = CSS::Length::make_px(containing_block.height());
|
||||
|
||||
auto is_absolute = [](CSS::LengthPercentage const& length_percentage) {
|
||||
return length_percentage.is_length() && length_percentage.length().is_absolute();
|
||||
};
|
||||
|
||||
// Then work out what the height is, based on box type and CSS properties.
|
||||
float height = 0;
|
||||
if (is<ReplacedBox>(box)) {
|
||||
height = compute_height_for_replaced_element(verify_cast<ReplacedBox>(box));
|
||||
} else {
|
||||
if (box.computed_values().height().is_undefined_or_auto()
|
||||
|| (computed_values.height().is_percentage() && !containing_block.computed_values().height().is_absolute())) {
|
||||
if ((box.computed_values().height().is_length() && box.computed_values().height().length().is_undefined_or_auto())
|
||||
|| (computed_values.height().is_percentage() && !is_absolute(containing_block.computed_values().height()))) {
|
||||
height = compute_auto_height_for_block_level_element(box, ConsiderFloats::No);
|
||||
} else {
|
||||
height = computed_values.height().resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
height = computed_values.height().resolved(containing_block_height).resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
}
|
||||
}
|
||||
|
||||
auto specified_max_height = computed_values.max_height().resolved_or_auto(box, containing_block.height());
|
||||
auto specified_max_height = computed_values.max_height().resolved(containing_block_height).resolved_or_auto(box, containing_block.height());
|
||||
if (!specified_max_height.is_auto()
|
||||
&& !(computed_values.max_height().is_percentage() && !containing_block.computed_values().height().is_absolute()))
|
||||
&& !(computed_values.max_height().is_percentage() && !is_absolute(containing_block.computed_values().height())))
|
||||
height = min(height, specified_max_height.to_px(box));
|
||||
auto specified_min_height = computed_values.min_height().resolved_or_auto(box, containing_block.height());
|
||||
auto specified_min_height = computed_values.min_height().resolved(containing_block_height).resolved_or_auto(box, containing_block.height());
|
||||
if (!specified_min_height.is_auto()
|
||||
&& !(computed_values.min_height().is_percentage() && !containing_block.computed_values().height().is_absolute()))
|
||||
&& !(computed_values.min_height().is_percentage() && !is_absolute(containing_block.computed_values().height())))
|
||||
height = max(height, specified_min_height.to_px(box));
|
||||
return height;
|
||||
}
|
||||
|
@ -323,17 +330,18 @@ void BlockFormattingContext::compute_height(Box& box)
|
|||
{
|
||||
auto& computed_values = box.computed_values();
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto width_of_containing_block_as_length = CSS::Length::make_px(containing_block.width());
|
||||
|
||||
// First, resolve the top/bottom parts of the surrounding box model.
|
||||
|
||||
// FIXME: While negative values are generally allowed for margins, for now just ignore those for height calculation
|
||||
box.box_model().margin.top = max(computed_values.margin().top.resolved_or_zero(box, containing_block.width()).to_px(box), 0);
|
||||
box.box_model().margin.bottom = max(computed_values.margin().bottom.resolved_or_zero(box, containing_block.width()).to_px(box), 0);
|
||||
box.box_model().margin.top = max(computed_values.margin().top.resolved(width_of_containing_block_as_length).resolved_or_zero(box, containing_block.width()).to_px(box), 0);
|
||||
box.box_model().margin.bottom = max(computed_values.margin().bottom.resolved(width_of_containing_block_as_length).resolved_or_zero(box, containing_block.width()).to_px(box), 0);
|
||||
|
||||
box.box_model().border.top = computed_values.border_top().width;
|
||||
box.box_model().border.bottom = computed_values.border_bottom().width;
|
||||
box.box_model().padding.top = computed_values.padding().top.resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
box.box_model().padding.bottom = computed_values.padding().bottom.resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
box.box_model().padding.top = computed_values.padding().top.resolved(width_of_containing_block_as_length).resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
box.box_model().padding.bottom = computed_values.padding().bottom.resolved(width_of_containing_block_as_length).resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
|
||||
auto height = compute_theoretical_height(box);
|
||||
box.set_height(height);
|
||||
|
@ -347,9 +355,10 @@ void BlockFormattingContext::compute_position(Box& box)
|
|||
auto& box_model = box.box_model();
|
||||
auto& computed_values = box.computed_values();
|
||||
float width_of_containing_block = box.containing_block()->width();
|
||||
auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
|
||||
|
||||
auto specified_left = computed_values.offset().left.resolved_or_zero(box, width_of_containing_block);
|
||||
auto specified_right = computed_values.offset().right.resolved_or_zero(box, width_of_containing_block);
|
||||
auto specified_left = computed_values.offset().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
auto specified_right = computed_values.offset().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box, width_of_containing_block);
|
||||
|
||||
if (specified_left.is_auto() && specified_right.is_auto()) {
|
||||
// If both 'left' and 'right' are 'auto' (their initial values), the used values are '0' (i.e., the boxes stay in their original position).
|
||||
|
@ -420,7 +429,7 @@ void BlockFormattingContext::layout_block_level_children(BlockContainer& block_c
|
|||
});
|
||||
|
||||
if (layout_mode != LayoutMode::Default) {
|
||||
if (block_container.computed_values().width().is_undefined() || block_container.computed_values().width().is_auto())
|
||||
if (block_container.computed_values().width().is_length() && block_container.computed_values().width().length().is_undefined_or_auto())
|
||||
block_container.set_width(content_width);
|
||||
}
|
||||
}
|
||||
|
@ -429,13 +438,14 @@ void BlockFormattingContext::place_block_level_replaced_element_in_normal_flow(B
|
|||
{
|
||||
VERIFY(!containing_block.is_absolutely_positioned());
|
||||
auto& replaced_element_box_model = child_box.box_model();
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
|
||||
replaced_element_box_model.margin.top = child_box.computed_values().margin().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
replaced_element_box_model.margin.bottom = child_box.computed_values().margin().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
replaced_element_box_model.margin.top = child_box.computed_values().margin().top.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
replaced_element_box_model.margin.bottom = child_box.computed_values().margin().bottom.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
replaced_element_box_model.border.top = child_box.computed_values().border_top().width;
|
||||
replaced_element_box_model.border.bottom = child_box.computed_values().border_bottom().width;
|
||||
replaced_element_box_model.padding.top = child_box.computed_values().padding().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
replaced_element_box_model.padding.bottom = child_box.computed_values().padding().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
replaced_element_box_model.padding.top = child_box.computed_values().padding().top.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
replaced_element_box_model.padding.bottom = child_box.computed_values().padding().bottom.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
|
||||
float x = replaced_element_box_model.margin.left
|
||||
+ replaced_element_box_model.border.left
|
||||
|
@ -451,13 +461,14 @@ void BlockFormattingContext::place_block_level_non_replaced_element_in_normal_fl
|
|||
{
|
||||
auto& box_model = child_box.box_model();
|
||||
auto& computed_values = child_box.computed_values();
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
|
||||
box_model.margin.top = computed_values.margin().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
box_model.margin.bottom = computed_values.margin().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
box_model.margin.top = computed_values.margin().top.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
box_model.margin.bottom = computed_values.margin().bottom.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
box_model.border.top = computed_values.border_top().width;
|
||||
box_model.border.bottom = computed_values.border_bottom().width;
|
||||
box_model.padding.top = computed_values.padding().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
box_model.padding.bottom = computed_values.padding().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
box_model.padding.top = computed_values.padding().top.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
box_model.padding.bottom = computed_values.padding().bottom.resolved(width_of_containing_block).resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
|
||||
|
||||
float x = box_model.margin.left
|
||||
+ box_model.border.left
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue