mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 16:37:35 +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
Andreas Kling
parent
cb0cce5cdc
commit
dc681913e8
12 changed files with 276 additions and 194 deletions
|
|
@ -154,10 +154,13 @@ static Gfx::FloatSize solve_replaced_size_constraint(float w, float h, const Rep
|
|||
// 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
|
||||
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto specified_min_width = box.computed_values().min_width().resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
auto specified_max_width = box.computed_values().max_width().resolved(CSS::Length::make_px(w), box, containing_block.width()).to_px(box);
|
||||
auto specified_min_height = box.computed_values().min_height().resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
auto specified_max_height = box.computed_values().max_height().resolved(CSS::Length::make_px(h), box, containing_block.height()).to_px(box);
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
auto height_of_containing_block = CSS::Length::make_px(containing_block.height());
|
||||
|
||||
auto specified_min_width = box.computed_values().min_width().resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
auto specified_max_width = box.computed_values().max_width().resolved(width_of_containing_block).resolved(CSS::Length::make_px(w), box, containing_block.width()).to_px(box);
|
||||
auto specified_min_height = box.computed_values().min_height().resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
auto specified_max_height = box.computed_values().max_height().resolved(height_of_containing_block).resolved(CSS::Length::make_px(h), box, containing_block.height()).to_px(box);
|
||||
|
||||
auto min_width = min(specified_min_width, specified_max_width);
|
||||
auto max_width = max(specified_min_width, specified_max_width);
|
||||
|
|
@ -248,7 +251,8 @@ float FormattingContext::compute_auto_height_for_block_level_element(Box const&
|
|||
float FormattingContext::tentative_width_for_replaced_element(ReplacedBox const& box, CSS::Length const& computed_width)
|
||||
{
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto computed_height = box.computed_values().height().resolved_or_auto(box, containing_block.height());
|
||||
auto height_of_containing_block = CSS::Length::make_px(containing_block.height());
|
||||
auto computed_height = box.computed_values().height().resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height());
|
||||
|
||||
float used_width = computed_width.to_px(box);
|
||||
|
||||
|
|
@ -308,9 +312,10 @@ float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& b
|
|||
|
||||
auto zero_value = CSS::Length::make_px(0);
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
|
||||
auto margin_left = box.computed_values().margin().left.resolved_or_zero(box, containing_block.width());
|
||||
auto margin_right = box.computed_values().margin().right.resolved_or_zero(box, containing_block.width());
|
||||
auto margin_left = box.computed_values().margin().left.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width());
|
||||
auto margin_right = box.computed_values().margin().right.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width());
|
||||
|
||||
// A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
|
||||
if (margin_left.is_auto())
|
||||
|
|
@ -318,14 +323,14 @@ float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& b
|
|||
if (margin_right.is_auto())
|
||||
margin_right = zero_value;
|
||||
|
||||
auto specified_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
|
||||
auto specified_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
|
||||
// 1. The tentative used width is calculated (without 'min-width' and 'max-width')
|
||||
auto used_width = tentative_width_for_replaced_element(box, 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 = box.computed_values().max_width().resolved_or_auto(box, containing_block.width());
|
||||
auto specified_max_width = box.computed_values().max_width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
if (!specified_max_width.is_auto()) {
|
||||
if (used_width > specified_max_width.to_px(box)) {
|
||||
used_width = tentative_width_for_replaced_element(box, specified_max_width);
|
||||
|
|
@ -334,7 +339,7 @@ float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& b
|
|||
|
||||
// 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 = box.computed_values().min_width().resolved_or_auto(box, containing_block.width());
|
||||
auto specified_min_width = box.computed_values().min_width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
if (!specified_min_width.is_auto()) {
|
||||
if (used_width < specified_min_width.to_px(box)) {
|
||||
used_width = tentative_width_for_replaced_element(box, specified_min_width);
|
||||
|
|
@ -349,7 +354,8 @@ float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& b
|
|||
float FormattingContext::tentative_height_for_replaced_element(ReplacedBox const& box, CSS::Length const& computed_height)
|
||||
{
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto computed_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
auto computed_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
|
||||
// If 'height' and 'width' both have computed values of 'auto' and the element also has
|
||||
// an intrinsic height, then that intrinsic height is the used value of 'height'.
|
||||
|
|
@ -381,8 +387,10 @@ float FormattingContext::compute_height_for_replaced_element(const ReplacedBox&
|
|||
// 'inline-block' replaced elements in normal flow and floating replaced elements
|
||||
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto specified_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
|
||||
auto specified_height = box.computed_values().height().resolved_or_auto(box, containing_block.height());
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
auto height_of_containing_block = CSS::Length::make_px(containing_block.height());
|
||||
auto specified_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
auto specified_height = box.computed_values().height().resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height());
|
||||
|
||||
float used_height = tentative_height_for_replaced_element(box, specified_height);
|
||||
|
||||
|
|
@ -398,6 +406,7 @@ float FormattingContext::compute_height_for_replaced_element(const ReplacedBox&
|
|||
void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_element(Box& box)
|
||||
{
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
auto& computed_values = box.computed_values();
|
||||
auto zero_value = CSS::Length::make_px(0);
|
||||
|
||||
|
|
@ -405,15 +414,15 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
|
|||
auto margin_right = CSS::Length::make_auto();
|
||||
const auto border_left = computed_values.border_left().width;
|
||||
const auto border_right = computed_values.border_right().width;
|
||||
const auto padding_left = computed_values.padding().left.resolved_or_zero(box, containing_block.width());
|
||||
const auto padding_right = computed_values.padding().right.resolved_or_zero(box, containing_block.width());
|
||||
const auto padding_left = computed_values.padding().left.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width());
|
||||
const auto padding_right = computed_values.padding().right.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width());
|
||||
|
||||
auto try_compute_width = [&](const auto& a_width) {
|
||||
margin_left = computed_values.margin().left.resolved_or_zero(box, containing_block.width());
|
||||
margin_right = computed_values.margin().right.resolved_or_zero(box, containing_block.width());
|
||||
margin_left = computed_values.margin().left.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width());
|
||||
margin_right = computed_values.margin().right.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width());
|
||||
|
||||
auto left = computed_values.offset().left.resolved_or_auto(box, containing_block.width());
|
||||
auto right = computed_values.offset().right.resolved_or_auto(box, containing_block.width());
|
||||
auto left = computed_values.offset().left.resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
auto right = computed_values.offset().right.resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
auto width = a_width;
|
||||
|
||||
auto solve_for_left = [&] {
|
||||
|
|
@ -502,14 +511,14 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
|
|||
return width;
|
||||
};
|
||||
|
||||
auto specified_width = computed_values.width().resolved_or_auto(box, containing_block.width());
|
||||
auto specified_width = computed_values.width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
|
||||
// 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, containing_block.width());
|
||||
auto specified_max_width = computed_values.max_width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
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);
|
||||
|
|
@ -518,7 +527,7 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
|
|||
|
||||
// 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, containing_block.width());
|
||||
auto specified_min_width = computed_values.min_width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
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);
|
||||
|
|
@ -547,26 +556,28 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
|
|||
{
|
||||
auto& computed_values = box.computed_values();
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
auto height_of_containing_block = CSS::Length::make_px(containing_block.height());
|
||||
|
||||
CSS::Length specified_top = computed_values.offset().top.resolved_or_auto(box, containing_block.height());
|
||||
CSS::Length specified_bottom = computed_values.offset().bottom.resolved_or_auto(box, containing_block.height());
|
||||
CSS::Length specified_top = computed_values.offset().top.resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height());
|
||||
CSS::Length specified_bottom = computed_values.offset().bottom.resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height());
|
||||
CSS::Length specified_height;
|
||||
|
||||
if (computed_values.height().is_percentage() && !containing_block.computed_values().height().is_absolute()) {
|
||||
if (computed_values.height().is_percentage() && !(containing_block.computed_values().height().is_length() && containing_block.computed_values().height().length().is_absolute())) {
|
||||
specified_height = CSS::Length::make_auto();
|
||||
} else {
|
||||
specified_height = computed_values.height().resolved_or_auto(box, containing_block.height());
|
||||
specified_height = computed_values.height().resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height());
|
||||
}
|
||||
|
||||
auto specified_max_height = computed_values.max_height().resolved_or_auto(box, containing_block.height());
|
||||
auto specified_min_height = computed_values.min_height().resolved_or_auto(box, containing_block.height());
|
||||
auto specified_max_height = computed_values.max_height().resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height());
|
||||
auto specified_min_height = computed_values.min_height().resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height());
|
||||
|
||||
box.box_model().margin.top = computed_values.margin().top.resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
box.box_model().margin.bottom = computed_values.margin().bottom.resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
box.box_model().margin.top = computed_values.margin().top.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
box.box_model().margin.bottom = computed_values.margin().bottom.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
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).resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
box.box_model().padding.bottom = computed_values.padding().bottom.resolved(width_of_containing_block).resolved_or_zero(box, containing_block.width()).to_px(box);
|
||||
|
||||
if (specified_height.is_auto() && !specified_top.is_auto() && specified_bottom.is_auto()) {
|
||||
const auto& margin = box.box_model().margin;
|
||||
|
|
@ -598,43 +609,49 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
|
|||
void FormattingContext::layout_absolutely_positioned_element(Box& box)
|
||||
{
|
||||
auto& containing_block = *box.containing_block();
|
||||
auto width_of_containing_block = CSS::Length::make_px(containing_block.width());
|
||||
auto height_of_containing_block = CSS::Length::make_px(containing_block.height());
|
||||
auto& box_model = box.box_model();
|
||||
|
||||
auto specified_width = box.computed_values().width().resolved_or_auto(box, containing_block.width());
|
||||
auto specified_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width());
|
||||
|
||||
compute_width_for_absolutely_positioned_element(box);
|
||||
(void)layout_inside(box, LayoutMode::Default);
|
||||
compute_height_for_absolutely_positioned_element(box);
|
||||
|
||||
box_model.margin.left = box.computed_values().margin().left.resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.margin.top = box.computed_values().margin().top.resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
box_model.margin.right = box.computed_values().margin().right.resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.margin.bottom = box.computed_values().margin().bottom.resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
box_model.margin.left = box.computed_values().margin().left.resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.margin.top = box.computed_values().margin().top.resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
box_model.margin.right = box.computed_values().margin().right.resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.margin.bottom = box.computed_values().margin().bottom.resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
|
||||
box_model.border.left = box.computed_values().border_left().width;
|
||||
box_model.border.right = box.computed_values().border_right().width;
|
||||
box_model.border.top = box.computed_values().border_top().width;
|
||||
box_model.border.bottom = box.computed_values().border_bottom().width;
|
||||
|
||||
box_model.offset.left = box.computed_values().offset().left.resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.offset.top = box.computed_values().offset().top.resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
box_model.offset.right = box.computed_values().offset().right.resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.offset.bottom = box.computed_values().offset().bottom.resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
box_model.offset.left = box.computed_values().offset().left.resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.offset.top = box.computed_values().offset().top.resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
box_model.offset.right = box.computed_values().offset().right.resolved(width_of_containing_block).resolved_or_auto(box, containing_block.width()).to_px(box);
|
||||
box_model.offset.bottom = box.computed_values().offset().bottom.resolved(height_of_containing_block).resolved_or_auto(box, containing_block.height()).to_px(box);
|
||||
|
||||
if (box.computed_values().offset().left.is_auto() && specified_width.is_auto() && box.computed_values().offset().right.is_auto()) {
|
||||
if (box.computed_values().margin().left.is_auto())
|
||||
auto is_auto = [](auto const& length_percentage) {
|
||||
return length_percentage.is_length() && length_percentage.length().is_auto();
|
||||
};
|
||||
|
||||
if (is_auto(box.computed_values().offset().left) && specified_width.is_auto() && is_auto(box.computed_values().offset().right)) {
|
||||
if (is_auto(box.computed_values().margin().left))
|
||||
box_model.margin.left = 0;
|
||||
if (box.computed_values().margin().right.is_auto())
|
||||
if (is_auto(box.computed_values().margin().right))
|
||||
box_model.margin.right = 0;
|
||||
}
|
||||
|
||||
Gfx::FloatPoint used_offset;
|
||||
|
||||
if (!box.computed_values().offset().left.is_auto()) {
|
||||
if (!is_auto(box.computed_values().offset().left)) {
|
||||
float x_offset = box_model.offset.left
|
||||
+ box_model.border_box().left;
|
||||
used_offset.set_x(x_offset + box_model.margin.left);
|
||||
} else if (!box.computed_values().offset().right.is_auto()) {
|
||||
} else if (!is_auto(box.computed_values().offset().right)) {
|
||||
float x_offset = 0
|
||||
- box_model.offset.right
|
||||
- box_model.border_box().right;
|
||||
|
|
@ -644,11 +661,11 @@ void FormattingContext::layout_absolutely_positioned_element(Box& box)
|
|||
used_offset.set_x(x_offset);
|
||||
}
|
||||
|
||||
if (!box.computed_values().offset().top.is_auto()) {
|
||||
if (!is_auto(box.computed_values().offset().top)) {
|
||||
float y_offset = box_model.offset.top
|
||||
+ box_model.border_box().top;
|
||||
used_offset.set_y(y_offset + box_model.margin.top);
|
||||
} else if (!box.computed_values().offset().bottom.is_auto()) {
|
||||
} else if (!is_auto(box.computed_values().offset().bottom)) {
|
||||
float y_offset = 0
|
||||
- box_model.offset.bottom
|
||||
- box_model.border_box().bottom;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue