diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-justified-text-in-between.txt b/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-justified-text-in-between.txt new file mode 100644 index 0000000000..10c211888c --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-justified-text-in-between.txt @@ -0,0 +1,202 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x600 [BFC] children: not-inline + BlockContainer at (252,10) content-size 538x398.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" + frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.553385x21.835937] + " " + frag 2 from TextNode start: 7, length: 5, rect: [630.553344,10 56.621093x21.835937] + "ipsum" + frag 3 from TextNode start: 12, length: 1, rect: [686.553344,10 12.553385x21.835937] + " " + frag 4 from TextNode start: 13, length: 5, rect: [699.106811,10 52.050781x21.835937] + "dolor" + frag 5 from TextNode start: 18, length: 1, rect: [751.106811,10 12.553385x21.835937] + " " + frag 6 from TextNode start: 19, length: 3, rect: [763.660156,10 25.957031x21.835937] + "sit" + line 1 width: 183.769531, height: 22.671875, bottom: 44.507812, baseline: 16.914062 + frag 0 from TextNode start: 23, length: 5, rect: [554,31 52.714843x21.835937] + "amet," + frag 1 from TextNode start: 28, length: 1, rect: [607,31 62.230468x21.835937] + " " + frag 2 from TextNode start: 29, length: 11, rect: [669.230468,31 121.054687x21.835937] + "consectetur" + line 2 width: 140.546875, height: 22.507812, bottom: 66.179687, baseline: 16.914062 + frag 0 from TextNode start: 41, length: 10, rect: [554,53 94.648437x21.835937] + "adipiscing" + frag 1 from TextNode start: 51, length: 1, rect: [649,53 105.453125x21.835937] + " " + frag 2 from TextNode start: 52, length: 5, rect: [754.453125,53 35.898437x21.835937] + "elit." + line 3 width: 145, height: 22.34375, bottom: 87.851562, baseline: 16.914062 + frag 0 from TextNode start: 58, length: 11, rect: [554,75 123.320312x21.835937] + "Suspendisse" + frag 1 from TextNode start: 69, length: 1, rect: [677,75 101x21.835937] + " " + frag 2 from TextNode start: 70, length: 1, rect: [778,75 11.679687x21.835937] + "a" + line 4 width: 196.699218, height: 22.179687, bottom: 109.523437, baseline: 16.914062 + frag 0 from TextNode start: 72, length: 8, rect: [554,97 82.050781x21.835937] + "placerat" + frag 1 from TextNode start: 80, length: 1, rect: [636,97 29.650390x21.835937] + " " + frag 2 from TextNode start: 81, length: 7, rect: [665.650390,97 73.867187x21.835937] + "mauris," + frag 3 from TextNode start: 88, length: 1, rect: [739.650390,97 29.650390x21.835937] + " " + frag 4 from TextNode start: 89, length: 2, rect: [769.300781,97 20.78125x21.835937] + "ut" + line 5 width: 234.6875, height: 22.015625, bottom: 131.195312, baseline: 16.914062 + frag 0 from TextNode start: 92, length: 9, rect: [554,119 101.289062x21.835937] + "elementum" + frag 1 from TextNode start: 101, length: 1, rect: [655,119 10.4375x21.835937] + " " + frag 2 from TextNode start: 102, length: 3, rect: [665.4375,119 26.386718x21.835937] + "mi." + frag 3 from TextNode start: 105, length: 1, rect: [692.4375,119 10.4375x21.835937] + " " + frag 4 from TextNode start: 106, length: 5, rect: [702.875,119 56.230468x21.835937] + "Morbi" + frag 5 from TextNode start: 111, length: 1, rect: [758.875,119 10.4375x21.835937] + " " + frag 6 from TextNode start: 112, length: 2, rect: [769.3125,119 20.78125x21.835937] + "ut" + line 6 width: 201.523437, height: 21.851562, bottom: 152.867187, baseline: 16.914062 + frag 0 from TextNode start: 115, length: 8, rect: [554,141 78.769531x21.835937] + "vehicula" + frag 1 from TextNode start: 123, length: 1, rect: [633,141 27.238281x21.835937] + " " + frag 2 from TextNode start: 124, length: 6, rect: [660.238281,141 62.929687x21.835937] + "ipsum," + frag 3 from TextNode start: 130, length: 1, rect: [723.238281,141 27.238281x21.835937] + " " + frag 4 from TextNode start: 131, length: 4, rect: [750.476562,141 39.824218x21.835937] + "eget" + line 7 width: 232.539062, height: 22.6875, bottom: 175.539062, baseline: 16.914062 + frag 0 from TextNode start: 136, length: 8, rect: [554,162 82.050781x21.835937] + "placerat" + frag 1 from TextNode start: 144, length: 1, rect: [636,162 11.730468x21.835937] + " " + frag 2 from TextNode start: 145, length: 6, rect: [647.730468,162 61.875x21.835937] + "augue." + frag 3 from TextNode start: 151, length: 1, rect: [709.730468,162 11.730468x21.835937] + " " + frag 4 from TextNode start: 152, length: 7, rect: [721.460937,162 68.613281x21.835937] + "Integer" + line 8 width: 202.96875, height: 22.523437, bottom: 197.210937, baseline: 16.914062 + frag 0 from TextNode start: 160, length: 6, rect: [554,184 70.3125x21.835937] + "rutrum" + frag 1 from TextNode start: 166, length: 1, rect: [624,184 21.010416x21.835937] + " " + frag 2 from TextNode start: 167, length: 4, rect: [645.010375,184 35.097656x21.835937] + "nisi" + frag 3 from TextNode start: 171, length: 1, rect: [680.010375,184 21.010416x21.835937] + " " + frag 4 from TextNode start: 172, length: 4, rect: [701.020874,184 39.824218x21.835937] + "eget" + frag 5 from TextNode start: 176, length: 1, rect: [741.020874,184 21.010416x21.835937] + " " + 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] + "dictum," + frag 1 from TextNode start: 188, length: 1, rect: [321,211 23.585937x21.835937] + " " + frag 2 from TextNode start: 189, length: 2, rect: [344.585937,211 23.105468x21.835937] + "eu" + frag 3 from TextNode start: 191, length: 1, rect: [367.585937,211 23.585937x21.835937] + " " + frag 4 from TextNode start: 192, length: 8, rect: [391.171875,211 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] + "enim" + frag 1 from TextNode start: 205, length: 1, rect: [296,233 37.902343x21.835937] + " " + frag 2 from TextNode start: 206, length: 10, rect: [333.902343,233 93.632812x21.835937] + "tristique." + frag 3 from TextNode start: 216, length: 1, rect: [427.902343,233 37.902343x21.835937] + " " + frag 4 from TextNode start: 217, length: 2, rect: [465.804687,233 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] + "lobortis" + frag 1 from TextNode start: 228, length: 1, rect: [332,255 30.363281x21.835937] + " " + frag 2 from TextNode start: 229, length: 5, rect: [362.363281,255 55.429687x21.835937] + "lorem" + frag 3 from TextNode start: 234, length: 1, rect: [417.363281,255 30.363281x21.835937] + " " + frag 4 from TextNode start: 235, length: 4, rect: [447.726562,255 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] + "est" + frag 1 from TextNode start: 243, length: 1, rect: [283,277 16.544921x21.835937] + " " + frag 2 from TextNode start: 244, length: 9, rect: [299.544921,277 91.464843x21.835937] + "vulputate" + frag 3 from TextNode start: 253, length: 1, rect: [391.544921,277 16.544921x21.835937] + " " + frag 4 from TextNode start: 254, length: 8, rect: [408.089843,277 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] + "Integer" + frag 1 from TextNode start: 270, length: 1, rect: [321,298 16.4375x21.835937] + " " + frag 2 from TextNode start: 271, length: 7, rect: [337.4375,298 71.328125x21.835937] + "laoreet" + frag 3 from TextNode start: 278, length: 1, rect: [408.4375,298 16.4375x21.835937] + " " + frag 4 from TextNode start: 279, length: 7, rect: [424.875,298 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] + "ante" + frag 1 from TextNode start: 291, length: 1, rect: [295,320 16.691406x21.835937] + " " + frag 2 from TextNode start: 292, length: 7, rect: [311.691406,320 74.003906x21.835937] + "sodales" + frag 3 from TextNode start: 299, length: 1, rect: [385.691406,320 16.691406x21.835937] + " " + frag 4 from TextNode start: 300, length: 9, rect: [402.382812,320 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] + "Donec" + frag 1 from TextNode start: 315, length: 1, rect: [313,342 38.849609x21.835937] + " " + frag 2 from TextNode start: 316, length: 1, rect: [351.849609,342 11.679687x21.835937] + "a" + frag 3 from TextNode start: 317, length: 1, rect: [363.849609,342 38.849609x21.835937] + " " + frag 4 from TextNode start: 318, length: 9, rect: [402.699218,342 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] + "ante." + frag 1 from TextNode start: 333, length: 1, rect: [301,364 11.641926x21.835937] + " " + frag 2 from TextNode start: 334, length: 9, rect: [312.641937,364 94.765625x21.835937] + "Phasellus" + frag 3 from TextNode start: 343, length: 1, rect: [406.641906,364 11.641926x21.835937] + " " + frag 4 from TextNode start: 344, length: 1, rect: [418.283874,364 11.679687x21.835937] + "a" + frag 5 from TextNode start: 345, length: 1, rect: [430.283874,364 11.641926x21.835937] + " " + frag 6 from TextNode start: 346, length: 4, rect: [441.925781,364 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] + "tortor." + BlockContainer at (253,11) content-size 300x200 floating [BFC] children: not-inline + TextNode <#text> + BlockContainer at (489,213) content-size 300x200 floating [BFC] children: not-inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/block-and-inline/float-left-and-right-with-justified-text-in-between.html b/Tests/LibWeb/Layout/input/block-and-inline/float-left-and-right-with-justified-text-in-between.html new file mode 100644 index 0000000000..c2c59b44d6 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/float-left-and-right-with-justified-text-in-between.html @@ -0,0 +1,25 @@ + +
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a placerat mauris, ut elementum mi. Morbi ut vehicula ipsum, eget placerat augue. Integer rutrum nisi eget dui dictum, eu accumsan enim tristique. Ut lobortis lorem eget est vulputate egestas. Integer laoreet lacinia ante sodales lobortis. Donec a tincidunt ante. Phasellus a arcu tortor. diff --git a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp index d87e561b21..c21cbe12f9 100644 --- a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp @@ -193,7 +193,7 @@ void InlineFormattingContext::apply_justification_to_fragments(CSS::TextJustify break; } - CSSPixels excess_horizontal_space = m_available_space->width.to_px() - line_box.width(); + CSSPixels excess_horizontal_space = line_box.original_available_width() - line_box.width(); // Only justify the text if the excess horizontal space is less than or // equal to 10%, or if we are not looking at the last line box. diff --git a/Userland/Libraries/LibWeb/Layout/LineBox.h b/Userland/Libraries/LibWeb/Layout/LineBox.h index 8bfd6a3f91..533a007ed5 100644 --- a/Userland/Libraries/LibWeb/Layout/LineBox.h +++ b/Userland/Libraries/LibWeb/Layout/LineBox.h @@ -30,6 +30,8 @@ public: bool is_empty_or_ends_in_whitespace() const; bool is_empty() const { return m_fragments.is_empty() && !m_has_break; } + CSSPixels original_available_width() const { return m_original_available_width; } + private: friend class BlockContainer; friend class InlineFormattingContext; @@ -40,6 +42,10 @@ private: CSSPixels m_height { 0 }; CSSPixels m_bottom { 0 }; CSSPixels m_baseline { 0 }; + + // The amount of available width that was originally available when creating this line box. Used for text justification. + CSSPixels m_original_available_width { 0 }; + bool m_has_break { false }; }; diff --git a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp index 85a1ab501d..fd61fef8eb 100644 --- a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp @@ -65,6 +65,7 @@ void LineBuilder::begin_new_line(bool increment_y, bool is_first_break_in_sequen } } recalculate_available_space(); + ensure_last_line_box().m_original_available_width = m_available_width_for_current_line; m_max_height_on_current_line = 0; m_last_line_needs_update = true; @@ -335,6 +336,8 @@ void LineBuilder::recalculate_available_space() auto available_at_top_of_line_box = m_context.available_space_for_line(m_current_y); auto available_at_bottom_of_line_box = m_context.available_space_for_line(m_current_y + current_line_height - 1); m_available_width_for_current_line = min(available_at_bottom_of_line_box, available_at_top_of_line_box); + if (!m_containing_block_state.line_boxes.is_empty()) + m_containing_block_state.line_boxes.last().m_original_available_width = m_available_width_for_current_line; } }