1
Fork 0
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:
Sam Atkins 2022-01-19 16:19:43 +00:00 committed by Andreas Kling
parent cb0cce5cdc
commit dc681913e8
12 changed files with 276 additions and 194 deletions

View file

@ -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