LibWeb: Add word spacing to tab size correctly

We should be adding the computed value for word spacing not letter
spacing twice.
This commit is contained in:
Kostya Farber 2024-10-27 13:13:48 +00:00 committed by Andreas Kling
commit 2f41be733f
Notes: github-actions[bot] 2024-10-28 21:56:26 +00:00
3 changed files with 59 additions and 1 deletions

View file

@ -0,0 +1,24 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x39 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x23 children: not-inline
BlockContainer <div.ref> at (186,10) content-size 16x16 positioned [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.test> at (8,8) content-size 784x23 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [8,17 148x14] baseline: 10.890625
" "
frag 1 from BlockContainer start: 0, length: 0, rect: [156,8 20x20] baseline: 20
TextNode <#text>
BlockContainer <span> at (156,8) content-size 20x20 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,31) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x39]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x23]
PaintableWithLines (BlockContainer<DIV>.ref) [184,8 20x20]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.test) [8,8 784x23]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<SPAN>) [156,8 20x20]
PaintableWithLines (BlockContainer(anonymous)) [8,31 784x0]

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<style>
.test {
white-space: pre;
tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
font-family: monospace; /* because the ch unit is based on the size of the 0 character,
and we want to measure space characters
so they need to be the same size. */
letter-spacing: 2px;
font-size: 13px;
word-spacing: 10px;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: green;
}
.ref {
position: absolute;
z-index: -1;
width: 20px;
height: 20px;
background: red;
margin-left: calc(8ch + 8 * 2px + 8 * 10px);
/* this is to avoid antialiasing effects at the edge */
box-sizing: border-box;
border: 2px solid white;
}
</style>
<div class="ref"></div>
<div class="test">&#x09;<span></span></div>

View file

@ -266,7 +266,7 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
auto computed_word_spacing = text_node.computed_values().word_spacing();
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);
auto word_spacing = computed_word_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()));
});