Skip to content

Commit 80ac213

Browse files
mehrankamalmehrankamal
committed
LibWeb/Layout: Try to layout the text boxes as per the OverflowWrap
1 parent 6a13c1d commit 80ac213

File tree

6 files changed

+90
-0
lines changed

6 files changed

+90
-0
lines changed

‎Libraries/LibWeb/Layout/InlineFormattingContext.h

+2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ class InlineFormattingContext final : public FormattingContext {
3535
bool any_floats_intrude_at_block_offset(CSSPixels block_offset) const;
3636
bool can_fit_new_line_at_block_offset(CSSPixels block_offset) const;
3737

38+
Optional<AvailableSpace> const& available_space() const { return m_available_space; }
39+
3840
CSSPixels vertical_float_clearance() const;
3941
void set_vertical_float_clearance(CSSPixels);
4042

‎Libraries/LibWeb/Layout/InlineLevelIterator.cpp

+36
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@
55
*/
66

77
#include <LibGfx/Font/FontVariant.h>
8+
#include <LibGfx/TextLayout.h>
9+
#include <LibWeb/CSS/Enums.h>
810
#include <LibWeb/Layout/BreakNode.h>
911
#include <LibWeb/Layout/InlineFormattingContext.h>
1012
#include <LibWeb/Layout/InlineLevelIterator.h>
1113
#include <LibWeb/Layout/InlineNode.h>
1214
#include <LibWeb/Layout/ListItemMarkerBox.h>
1315
#include <LibWeb/Layout/ReplacedBox.h>
16+
#include <LibWeb/PixelUnits.h>
1417

1518
namespace Web::Layout {
1619

@@ -556,6 +559,39 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
556559

557560
CSSPixels chunk_width = CSSPixels::nearest_value_for(glyph_run->width());
558561

562+
// FIXME:
563+
{
564+
auto glyph_run = Gfx::shape_text({ x, 0 }, letter_spacing.to_float(), chunk.view, chunk.font, text_type, shape_features);
565+
dbgln("Shaping current chunk: {}", chunk.view);
566+
567+
CSSPixels chunk_width = CSSPixels::nearest_value_for(glyph_run->width());
568+
if (text_node.computed_values().overflow_wrap() == CSS::OverflowWrap::BreakWord) {
569+
// while glyph_run.width > context->available_space()
570+
// reshape text with lesser chars
571+
// reset the text_node iterator back to characters removed from initial text_shape
572+
auto maybe_available_space = m_inline_formatting_context.available_space();
573+
if (maybe_available_space.has_value()) {
574+
auto available_space = maybe_available_space.value();
575+
auto removed_code_points_count = 0;
576+
auto new_chunk_view = chunk.view;
577+
dbgln("Chunk Width: {}, Available Width: {}", chunk_width.to_int(), available_space.width.to_px_or_zero().to_int());
578+
579+
// FIXME: Use binary search to find the number of characters to rewind to
580+
while (chunk_width + CSSPixels::from_raw(removed_code_points_count) > available_space.width.to_px_or_zero()) {
581+
new_chunk_view = new_chunk_view.unicode_substring_view(0, new_chunk_view.length() - 1);
582+
glyph_run = Gfx::shape_text({ x, 0 }, letter_spacing.to_float(), new_chunk_view, chunk.font, text_type, shape_features);
583+
dbgln("Shaped current chunk: {}", new_chunk_view);
584+
chunk_width = CSSPixels::nearest_value_for(glyph_run->width());
585+
removed_code_points_count++;
586+
}
587+
588+
// FIXME: Rewind the chunk_iterator back removed_code_points_count times.
589+
590+
dbgln("Removed {} codepoints when Breaking Words", removed_code_points_count);
591+
}
592+
}
593+
}
594+
559595
// NOTE: We never consider `content: ""` to be collapsible whitespace.
560596
bool is_generated_empty_string = text_node.is_generated() && chunk.length == 0;
561597

‎Tests/LibWeb/Ref/expected/wpt-import/css/css-text/overflow-wrap/overflow-wrap-001-ref.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<meta charset="utf-8" />
3+
<title>CSS Text Test Reference File</title>
4+
<link rel="author" title="Intel" href="http://www.intel.com" />
5+
<link rel="stylesheet" type="text/css" href="../../..../../../fonts/ahem.css" />
6+
<style>
7+
#test {
8+
border: 5px solid orange;
9+
font: 20px/1 Ahem;
10+
width: 200px;
11+
}
12+
</style>
13+
<body>
14+
<p class="instructions">Test passes if the black box is within the orange box.</p>
15+
<p id="test">FillerText<br />FillerText<br />FillerText<br />FillerText</p>
16+
</body>

‎Tests/LibWeb/Ref/expected/wpt-import/fonts/ahem.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@font-face {
2+
font-family: "Ahem";
3+
src: local("Ahem"), url("/fonts/Ahem.ttf");
4+
}

‎Tests/LibWeb/Ref/input/wpt-import/css/css-text/overflow-wrap/overflow-wrap-001.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<meta charset="utf-8" />
3+
<title>CSS Text Test: overflow-wrap - break-word (basic)</title>
4+
<link rel="author" title="Intel" href="http://www.intel.com" />
5+
<link rel="author" title="Shiyou Tan" href="mailto:[email protected]" />
6+
<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property" />
7+
<link
8+
rel="match"
9+
href="../../../../../expected/wpt-import/css/css-text/overflow-wrap/overflow-wrap-001-ref.html"
10+
/>
11+
<meta name="flags" content="ahem" />
12+
<meta
13+
name="assert"
14+
content="The 'overflow-wrap' property set 'break-word' breaks the word at an arbitrary point"
15+
/>
16+
<link rel="stylesheet" type="text/css" href="../../..../../../fonts/ahem.css" />
17+
<style>
18+
#test {
19+
border: 5px solid orange;
20+
font: 20px/1 Ahem;
21+
overflow-wrap: break-word;
22+
width: 200px;
23+
}
24+
</style>
25+
<body>
26+
<p class="instructions">Test passes if the black box is within the orange box.</p>
27+
<p id="test">FillerTextFillerTextFillerTextFillerText</p>
28+
</body>

‎Tests/LibWeb/Ref/input/wpt-import/fonts/ahem.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@font-face {
2+
font-family: "Ahem";
3+
src: local("Ahem"), url("/fonts/Ahem.ttf");
4+
}

0 commit comments

Comments
 (0)