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

LibWeb: Remove early resolve to auto while calculating border-box width

Browse source 
`Length::resolved(Node&)` transforms infinite values to "auto".

Following transformations:
Infinite (Length) -> "auto" -> 0 (px)
cause border-box width to be resolved in zero when it should be inf px.

Removing `Length::resolved(Node&)` makes it work right:
Infinite (Length) -> Infinite (px)

Fixes #18649
This commit is contained in:
Aliaksandr Kalenik 2023-05-05 09:45:19 +03:00 • committed by Andreas Kling
parent 2d2d2539b4
commit 34b1186272
3 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Tests/LibWeb/Layout/expected/block-and-inline/max-width-percentage-100-border-box.txt Normal file
View file

@ -0,0 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 93.59375x19.46875 positioned [BFC] children: not-inline
BlockContainer <nav> at (11,11) content-size 91.59375x17.46875 children: inline
line 0 width: 91.59375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [11,11 91.59375x17.46875]
"border box"
TextNode <#text>

8
Tests/LibWeb/Layout/input/block-and-inline/max-width-percentage-100-border-box.html Normal file
View file

@ -0,0 +1,8 @@
<!doctype html><style>
* { border: 1px solid black; font-family: 'SerenitySans'; }
body { position: absolute; }
nav {
max-width: 100%;
box-sizing: border-box;
}
</style><body><nav>border box

12
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -1291,10 +1291,10 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
auto& computed_values = box.computed_values(); auto& computed_values = box.computed_values();
if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) { if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box); auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve);
auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box); auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve);
auto inner_width = width.resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box).to_px(box) auto inner_width = width.resolved(box, width_of_containing_block_as_length_for_resolve).to_px(box)
- computed_values.border_left().width - computed_values.border_left().width
- padding_left.to_px(box) - padding_left.to_px(box)
- computed_values.border_right().width - computed_values.border_right().width
@ -1317,10 +1317,10 @@ CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, Av
if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) { if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
auto width_of_containing_block = CSS::Length::make_px(containing_block_width_for(box)); auto width_of_containing_block = CSS::Length::make_px(containing_block_width_for(box));
auto const padding_top = computed_values.padding().top().resolved(box, width_of_containing_block).resolved(box); auto const padding_top = computed_values.padding().top().resolved(box, width_of_containing_block);
auto const padding_bottom = computed_values.padding().bottom().resolved(box, width_of_containing_block).resolved(box); auto const padding_bottom = computed_values.padding().bottom().resolved(box, width_of_containing_block);
auto inner_height = height.resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box).to_px(box) auto inner_height = height.resolved(box, height_of_containing_block_as_length_for_resolve).to_px(box)
- computed_values.border_top().width - computed_values.border_top().width
- padding_top.to_px(box) - padding_top.to_px(box)
- computed_values.border_bottom().width - computed_values.border_bottom().width