0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Bring tab-size closer to the spec

Browse source 
When the css tab-size property is a number, we need to add
the associated letter-spacing and word-spacing to it's width.
This commit is contained in:
Kostya Farber 2024-10-23 08:27:22 +01:00 • committed by Andreas Kling
parent c6f77f4818
commit 2dc788df00
Notes: github-actions[bot] 2024-10-27 10:17:52 +00:00
5 changed files with 58 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Tests/LibWeb/Layout/expected/tab-size-letter-spacing.txt Normal file
View file

@ -0,0 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
BlockContainer <div> at (8,8) content-size 784x17 children: inline
frag 0 from TextNode start: 1, length: 1, rect: [8,8 14.265625x17] baseline: 13.296875
"A"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>) [8,8 784x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]

16
Tests/LibWeb/Layout/expected/tab-size-word-spacing.txt Normal file
View file

@ -0,0 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
BlockContainer <div> at (8,8) content-size 784x17 children: inline
frag 0 from TextNode start: 1, length: 1, rect: [8,8 14.265625x17] baseline: 13.296875
"A"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>) [8,8 784x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]

9
Tests/LibWeb/Layout/input/tab-size-letter-spacing.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<style>
div {
tab-size: 8;
letter-spacing: 2ch;
font-family: monospace;
}
</style>
<div>&#9;A</div>

9
Tests/LibWeb/Layout/input/tab-size-word-spacing.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<style>
div {
tab-size: 8;
word-spacing: 2ch;
font-family: monospace;
}
</style>
<div>&#9;A</div>

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

@ -253,18 +253,22 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
// https://drafts.csswg.org/css-text/#tab-size-property
auto tab_size = text_node.computed_values().tab_size();
auto resolution_context = CSS::Length::ResolutionContext::for_layout_node(text_node);
CSSPixels tab_width;
tab_width = tab_size.visit(
[&](CSS::LengthOrCalculated const& t) -> CSSPixels {
auto resolution_context = CSS::Length::ResolutionContext::for_layout_node(text_node);
auto value = t.resolved(resolution_context);
return value.to_px(text_node);
},
[&](CSS::NumberOrCalculated const& n) -> CSSPixels {
auto number = n.resolved(text_node);
auto tab_number = n.resolved(text_node);
auto computed_letter_spacing = text_node.computed_values().letter_spacing();
auto computed_word_spacing = text_node.computed_values().word_spacing();
return CSSPixels::nearest_value_for(number * chunk.font->glyph_width(' '));
auto letter_spacing = computed_letter_spacing.resolved(resolution_context).to_px(text_node);
auto word_spacing = computed_letter_spacing.resolved(resolution_context).to_px(text_node);
return CSSPixels::nearest_value_for(tab_number * (chunk.font->glyph_width(' ') + word_spacing.to_float() + letter_spacing.to_float()));
});
// https://drafts.csswg.org/css-text/#white-space-phase-2