RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 04:27:43 +00:00
Code Issues Activity Actions

LibWeb: Convert width/height and min-/max- versions to LengthPercentage

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

81
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
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