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

LibWeb: Remove Gfx::Rect<float> workarounds from BFC

Browse source 
No longer is the last horizontal line of pixels ignored during layout.
This used to be a bug in `Gfx::Rect<float>` that was fixed in
f391ccfe53.
This commit is contained in:
Jelle Raaijmakers 2023-05-24 16:54:06 +02:00 • committed by Andreas Kling
parent 38b2cba6a2
commit 90d8844c77
3 changed files with 75 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

106
Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-justified-text-in-between.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
BlockContainer <body> at (252,10) content-size 538x398.257812 children: inline
BlockContainer <body> at (252,10) content-size 538x399.257812 children: inline
line 0 width: 228.339843, height: 21.835937, bottom: 21.835937, baseline: 16.914062
frag 0 from TextNode start: 1, length: 5, rect: [554,10 63.710937x21.835937]
"Lorem"
@ -101,100 +101,100 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 6 from TextNode start: 177, length: 3, rect: [762.03125,184 27.734375x21.835937]
"dui"
line 9 width: 0, height: 0, bottom: 0, baseline: 0
line 10 width: 208.828125, height: 22.359375, bottom: 223.882812, baseline: 16.914062
frag 0 from TextNode start: 181, length: 7, rect: [252,211 68.984375x21.835937]
line 10 width: 208.828125, height: 22.359375, bottom: 224.882812, baseline: 16.914062
frag 0 from TextNode start: 181, length: 7, rect: [252,212 68.984375x21.835937]
"dictum,"
frag 1 from TextNode start: 188, length: 1, rect: [321,211 23.585937x21.835937]
frag 1 from TextNode start: 188, length: 1, rect: [321,212 23.585937x21.835937]
" "
frag 2 from TextNode start: 189, length: 2, rect: [344.585937,211 23.105468x21.835937]
frag 2 from TextNode start: 189, length: 2, rect: [344.585937,212 23.105468x21.835937]
"eu"
frag 3 from TextNode start: 191, length: 1, rect: [367.585937,211 23.585937x21.835937]
frag 3 from TextNode start: 191, length: 1, rect: [367.585937,212 23.585937x21.835937]
" "
frag 4 from TextNode start: 192, length: 8, rect: [391.171875,211 96.738281x21.835937]
frag 4 from TextNode start: 192, length: 8, rect: [391.171875,212 96.738281x21.835937]
"accumsan"
line 11 width: 180.195312, height: 22.195312, bottom: 245.554687, baseline: 16.914062
frag 0 from TextNode start: 201, length: 4, rect: [252,233 43.867187x21.835937]
line 11 width: 180.195312, height: 22.195312, bottom: 246.554687, baseline: 16.914062
frag 0 from TextNode start: 201, length: 4, rect: [252,234 43.867187x21.835937]
"enim"
frag 1 from TextNode start: 205, length: 1, rect: [296,233 37.902343x21.835937]
frag 1 from TextNode start: 205, length: 1, rect: [296,234 37.902343x21.835937]
" "
frag 2 from TextNode start: 206, length: 10, rect: [333.902343,233 93.632812x21.835937]
frag 2 from TextNode start: 206, length: 10, rect: [333.902343,234 93.632812x21.835937]
"tristique."
frag 3 from TextNode start: 216, length: 1, rect: [427.902343,233 37.902343x21.835937]
frag 3 from TextNode start: 216, length: 1, rect: [427.902343,234 37.902343x21.835937]
" "
frag 4 from TextNode start: 217, length: 2, rect: [465.804687,233 22.695312x21.835937]
frag 4 from TextNode start: 217, length: 2, rect: [465.804687,234 22.695312x21.835937]
"Ut"
line 12 width: 195.273437, height: 22.03125, bottom: 267.226562, baseline: 16.914062
frag 0 from TextNode start: 220, length: 8, rect: [252,255 80.019531x21.835937]
line 12 width: 195.273437, height: 22.03125, bottom: 268.226562, baseline: 16.914062
frag 0 from TextNode start: 220, length: 8, rect: [252,256 80.019531x21.835937]
"lobortis"
frag 1 from TextNode start: 228, length: 1, rect: [332,255 30.363281x21.835937]
frag 1 from TextNode start: 228, length: 1, rect: [332,256 30.363281x21.835937]
" "
frag 2 from TextNode start: 229, length: 5, rect: [362.363281,255 55.429687x21.835937]
frag 2 from TextNode start: 229, length: 5, rect: [362.363281,256 55.429687x21.835937]
"lorem"
frag 3 from TextNode start: 234, length: 1, rect: [417.363281,255 30.363281x21.835937]
frag 3 from TextNode start: 234, length: 1, rect: [417.363281,256 30.363281x21.835937]
" "
frag 4 from TextNode start: 235, length: 4, rect: [447.726562,255 39.824218x21.835937]
frag 4 from TextNode start: 235, length: 4, rect: [447.726562,256 39.824218x21.835937]
"eget"
line 13 width: 222.910156, height: 21.867187, bottom: 288.898437, baseline: 16.914062
frag 0 from TextNode start: 240, length: 3, rect: [252,277 31.152343x21.835937]
line 13 width: 222.910156, height: 21.867187, bottom: 289.898437, baseline: 16.914062
frag 0 from TextNode start: 240, length: 3, rect: [252,278 31.152343x21.835937]
"est"
frag 1 from TextNode start: 243, length: 1, rect: [283,277 16.544921x21.835937]
frag 1 from TextNode start: 243, length: 1, rect: [283,278 16.544921x21.835937]
" "
frag 2 from TextNode start: 244, length: 9, rect: [299.544921,277 91.464843x21.835937]
frag 2 from TextNode start: 244, length: 9, rect: [299.544921,278 91.464843x21.835937]
"vulputate"
frag 3 from TextNode start: 253, length: 1, rect: [391.544921,277 16.544921x21.835937]
frag 3 from TextNode start: 253, length: 1, rect: [391.544921,278 16.544921x21.835937]
" "
frag 4 from TextNode start: 254, length: 8, rect: [408.089843,277 80.292968x21.835937]
frag 4 from TextNode start: 254, length: 8, rect: [408.089843,278 80.292968x21.835937]
"egestas."
line 14 width: 223.125, height: 22.703125, bottom: 311.570312, baseline: 16.914062
frag 0 from TextNode start: 263, length: 7, rect: [252,298 68.613281x21.835937]
line 14 width: 223.125, height: 22.703125, bottom: 312.570312, baseline: 16.914062
frag 0 from TextNode start: 263, length: 7, rect: [252,299 68.613281x21.835937]
"Integer"
frag 1 from TextNode start: 270, length: 1, rect: [321,298 16.4375x21.835937]
frag 1 from TextNode start: 270, length: 1, rect: [321,299 16.4375x21.835937]
" "
frag 2 from TextNode start: 271, length: 7, rect: [337.4375,298 71.328125x21.835937]
frag 2 from TextNode start: 271, length: 7, rect: [337.4375,299 71.328125x21.835937]
"laoreet"
frag 3 from TextNode start: 278, length: 1, rect: [408.4375,298 16.4375x21.835937]
frag 3 from TextNode start: 278, length: 1, rect: [408.4375,299 16.4375x21.835937]
" "
frag 4 from TextNode start: 279, length: 7, rect: [424.875,298 63.183593x21.835937]
frag 4 from TextNode start: 279, length: 7, rect: [424.875,299 63.183593x21.835937]
"lacinia"
line 15 width: 222.617187, height: 22.539062, bottom: 333.242187, baseline: 16.914062
frag 0 from TextNode start: 287, length: 4, rect: [252,320 43.164062x21.835937]
line 15 width: 222.617187, height: 22.539062, bottom: 334.242187, baseline: 16.914062
frag 0 from TextNode start: 287, length: 4, rect: [252,321 43.164062x21.835937]
"ante"
frag 1 from TextNode start: 291, length: 1, rect: [295,320 16.691406x21.835937]
frag 1 from TextNode start: 291, length: 1, rect: [295,321 16.691406x21.835937]
" "
frag 2 from TextNode start: 292, length: 7, rect: [311.691406,320 74.003906x21.835937]
frag 2 from TextNode start: 292, length: 7, rect: [311.691406,321 74.003906x21.835937]
"sodales"
frag 3 from TextNode start: 299, length: 1, rect: [385.691406,320 16.691406x21.835937]
frag 3 from TextNode start: 299, length: 1, rect: [385.691406,321 16.691406x21.835937]
" "
frag 4 from TextNode start: 300, length: 9, rect: [402.382812,320 85.449218x21.835937]
frag 4 from TextNode start: 300, length: 9, rect: [402.382812,321 85.449218x21.835937]
"lobortis."
line 16 width: 178.300781, height: 22.375, bottom: 354.914062, baseline: 16.914062
frag 0 from TextNode start: 310, length: 5, rect: [252,342 60.898437x21.835937]
line 16 width: 178.300781, height: 22.375, bottom: 355.914062, baseline: 16.914062
frag 0 from TextNode start: 310, length: 5, rect: [252,343 60.898437x21.835937]
"Donec"
frag 1 from TextNode start: 315, length: 1, rect: [313,342 38.849609x21.835937]
frag 1 from TextNode start: 315, length: 1, rect: [313,343 38.849609x21.835937]
" "
frag 2 from TextNode start: 316, length: 1, rect: [351.849609,342 11.679687x21.835937]
frag 2 from TextNode start: 316, length: 1, rect: [351.849609,343 11.679687x21.835937]
"a"
frag 3 from TextNode start: 317, length: 1, rect: [363.849609,342 38.849609x21.835937]
frag 3 from TextNode start: 317, length: 1, rect: [363.849609,343 38.849609x21.835937]
" "
frag 4 from TextNode start: 318, length: 9, rect: [402.699218,342 85.722656x21.835937]
frag 4 from TextNode start: 318, length: 9, rect: [402.699218,343 85.722656x21.835937]
"tincidunt"
line 17 width: 231.074218, height: 22.210937, bottom: 376.585937, baseline: 16.914062
frag 0 from TextNode start: 328, length: 5, rect: [252,364 48.59375x21.835937]
line 17 width: 231.074218, height: 22.210937, bottom: 377.585937, baseline: 16.914062
frag 0 from TextNode start: 328, length: 5, rect: [252,365 48.59375x21.835937]
"ante."
frag 1 from TextNode start: 333, length: 1, rect: [301,364 11.641927x21.835937]
frag 1 from TextNode start: 333, length: 1, rect: [301,365 11.641927x21.835937]
" "
frag 2 from TextNode start: 334, length: 9, rect: [312.641927,364 94.765625x21.835937]
frag 2 from TextNode start: 334, length: 9, rect: [312.641927,365 94.765625x21.835937]
"Phasellus"
frag 3 from TextNode start: 343, length: 1, rect: [406.641927,364 11.641927x21.835937]
frag 3 from TextNode start: 343, length: 1, rect: [406.641927,365 11.641927x21.835937]
" "
frag 4 from TextNode start: 344, length: 1, rect: [418.283854,364 11.679687x21.835937]
frag 4 from TextNode start: 344, length: 1, rect: [418.283854,365 11.679687x21.835937]
"a"
frag 5 from TextNode start: 345, length: 1, rect: [430.283854,364 11.641927x21.835937]
frag 5 from TextNode start: 345, length: 1, rect: [430.283854,365 11.641927x21.835937]
" "
frag 6 from TextNode start: 346, length: 4, rect: [441.925781,364 46.035156x21.835937]
frag 6 from TextNode start: 346, length: 4, rect: [441.925781,365 46.035156x21.835937]
"arcu"
line 18 width: 70.546875, height: 22.046875, bottom: 398.257812, baseline: 16.914062
frag 0 from TextNode start: 351, length: 7, rect: [252,386 70.546875x21.835937]
line 18 width: 70.546875, height: 22.046875, bottom: 399.257812, baseline: 16.914062
frag 0 from TextNode start: 351, length: 7, rect: [252,387 70.546875x21.835937]
"tortor."
BlockContainer <div.left> at (253,11) content-size 300x200 floating [BFC] children: not-inline
TextNode <#text>

38
Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-text-in-between.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
BlockContainer <body> at (252,10) content-size 538x398.257812 children: inline
BlockContainer <body> at (252,10) content-size 538x399.257812 children: inline
line 0 width: 228.339843, height: 21.835937, bottom: 21.835937, baseline: 16.914062
frag 0 from TextNode start: 1, length: 21, rect: [554,10 228.339843x21.835937]
"Lorem ipsum dolor sit"
@ -29,32 +29,32 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from TextNode start: 160, length: 20, rect: [554,184 202.96875x21.835937]
"rutrum nisi eget dui"
line 9 width: 0, height: 0, bottom: 0, baseline: 0
line 10 width: 208.828125, height: 22.359375, bottom: 223.882812, baseline: 16.914062
frag 0 from TextNode start: 181, length: 19, rect: [252,211 208.828125x21.835937]
line 10 width: 208.828125, height: 22.359375, bottom: 224.882812, baseline: 16.914062
frag 0 from TextNode start: 181, length: 19, rect: [252,212 208.828125x21.835937]
"dictum, eu accumsan"
line 11 width: 180.195312, height: 22.195312, bottom: 245.554687, baseline: 16.914062
frag 0 from TextNode start: 201, length: 18, rect: [252,233 180.195312x21.835937]
line 11 width: 180.195312, height: 22.195312, bottom: 246.554687, baseline: 16.914062
frag 0 from TextNode start: 201, length: 18, rect: [252,234 180.195312x21.835937]
"enim tristique. Ut"
line 12 width: 195.273437, height: 22.03125, bottom: 267.226562, baseline: 16.914062
frag 0 from TextNode start: 220, length: 19, rect: [252,255 195.273437x21.835937]
line 12 width: 195.273437, height: 22.03125, bottom: 268.226562, baseline: 16.914062
frag 0 from TextNode start: 220, length: 19, rect: [252,256 195.273437x21.835937]
"lobortis lorem eget"
line 13 width: 222.910156, height: 21.867187, bottom: 288.898437, baseline: 16.914062
frag 0 from TextNode start: 240, length: 22, rect: [252,277 222.910156x21.835937]
line 13 width: 222.910156, height: 21.867187, bottom: 289.898437, baseline: 16.914062
frag 0 from TextNode start: 240, length: 22, rect: [252,278 222.910156x21.835937]
"est vulputate egestas."
line 14 width: 223.125, height: 22.703125, bottom: 311.570312, baseline: 16.914062
frag 0 from TextNode start: 263, length: 23, rect: [252,298 223.125x21.835937]
line 14 width: 223.125, height: 22.703125, bottom: 312.570312, baseline: 16.914062
frag 0 from TextNode start: 263, length: 23, rect: [252,299 223.125x21.835937]
"Integer laoreet lacinia"
line 15 width: 222.617187, height: 22.539062, bottom: 333.242187, baseline: 16.914062
frag 0 from TextNode start: 287, length: 22, rect: [252,320 222.617187x21.835937]
line 15 width: 222.617187, height: 22.539062, bottom: 334.242187, baseline: 16.914062
frag 0 from TextNode start: 287, length: 22, rect: [252,321 222.617187x21.835937]
"ante sodales lobortis."
line 16 width: 178.300781, height: 22.375, bottom: 354.914062, baseline: 16.914062
frag 0 from TextNode start: 310, length: 17, rect: [252,342 178.300781x21.835937]
line 16 width: 178.300781, height: 22.375, bottom: 355.914062, baseline: 16.914062
frag 0 from TextNode start: 310, length: 17, rect: [252,343 178.300781x21.835937]
"Donec a tincidunt"
line 17 width: 231.074218, height: 22.210937, bottom: 376.585937, baseline: 16.914062
frag 0 from TextNode start: 328, length: 22, rect: [252,364 231.074218x21.835937]
line 17 width: 231.074218, height: 22.210937, bottom: 377.585937, baseline: 16.914062
frag 0 from TextNode start: 328, length: 22, rect: [252,365 231.074218x21.835937]
"ante. Phasellus a arcu"
line 18 width: 70.546875, height: 22.046875, bottom: 398.257812, baseline: 16.914062
frag 0 from TextNode start: 351, length: 7, rect: [252,386 70.546875x21.835937]
line 18 width: 70.546875, height: 22.046875, bottom: 399.257812, baseline: 16.914062
frag 0 from TextNode start: 351, length: 7, rect: [252,387 70.546875x21.835937]
"tortor."
BlockContainer <div.left> at (253,11) content-size 300x200 floating [BFC] children: not-inline
TextNode <#text>

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

@ -874,9 +874,7 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
// We're looking for the innermost preceding float that intersects vertically with `box`.
for (auto& preceding_float : side_data.current_boxes.in_reverse()) {
auto const preceding_float_rect = margin_box_rect_in_ancestor_coordinate_space(preceding_float.box, root(), m_state);
// FIXME: the line below is for compatibility with a fixed `Gfx::FloatRect` bug where `.bottom()` was subtracted by one;
// replace with !rect.contains_vertically() and update the test cases accordingly.
if (y_in_root < preceding_float_rect.top() || y_in_root > preceding_float_rect.bottom() - 1.f)
if (!preceding_float_rect.contains_vertically(y_in_root))
continue;
// We found a preceding float that intersects vertically with the current float.
// Now we need to find out if there's enough inline-axis space to stack them next to each other.
@ -1009,9 +1007,7 @@ BlockFormattingContext::SpaceUsedByFloats BlockFormattingContext::space_used_by_
auto const& floating_box_state = m_state.get(floating_box.box);
// NOTE: The floating box is *not* in the final horizontal position yet, but the size and vertical position is valid.
auto rect = margin_box_rect_in_ancestor_coordinate_space(floating_box.box, root(), m_state);
// FIXME: the line below is for compatibility with a fixed `Gfx::FloatRect` bug where `.bottom()` was subtracted by one;
// replace with rect.contains_vertically() and update the test cases accordingly.
if (y.value() >= rect.top() && y.value() <= rect.bottom() - 1.f) {
if (rect.contains_vertically(y.value())) {
CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
for (auto const* containing_block = floating_box.box->containing_block(); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) {
auto const& containing_block_state = m_state.get(*containing_block);
@ -1030,9 +1026,7 @@ BlockFormattingContext::SpaceUsedByFloats BlockFormattingContext::space_used_by_
auto const& floating_box_state = m_state.get(floating_box.box);
// NOTE: The floating box is *not* in the final horizontal position yet, but the size and vertical position is valid.
auto rect = margin_box_rect_in_ancestor_coordinate_space(floating_box.box, root(), m_state);
// FIXME: the line below is for compatibility with a fixed `Gfx::FloatRect` bug where `.bottom()` was subtracted by one;
// replace with rect.contains_vertically() and update the test cases accordingly.
if (y.value() >= rect.top() && y.value() <= rect.bottom() - 1.f) {
if (rect.contains_vertically(y.value())) {
CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0;
for (auto const* containing_block = floating_box.box->containing_block(); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) {
auto const& containing_block_state = m_state.get(*containing_block);