Skip to content

Commit b34b801

Browse files
axgalloawesomekling
axgallo
authored and
awesomekling
committed
LibWeb: Fix buttons with TextNode label
Fixes #20472.
1 parent afb19a2 commit b34b801

File tree

9 files changed

+94
-39
lines changed

9 files changed

+94
-39
lines changed

‎Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,39 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
55
frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178]
66
TextNode <#text>
77
BlockContainer <button.button.border-black> at (22,19) content-size 48.6875x178 inline-block [BFC] children: not-inline
8-
BlockContainer <(anonymous)> at (22,19) content-size 48.6875x0 children: inline
9-
TextNode <#text>
10-
BlockContainer <(anonymous)> at (22,19) content-size 48.6875x0 children: inline
11-
TextNode <#text>
12-
BlockContainer <(anonymous)> at (22,19) content-size 48.6875x0 children: inline
13-
TextNode <#text>
148
TableWrapper <(anonymous)> at (22,19) content-size 48.6875x178 [BFC] children: not-inline
159
BlockContainer <(anonymous)> at (22,19) content-size 48.6875x178 table-box [TFC] children: not-inline
1610
Box <(anonymous)> at (22,19) content-size 48.6875x178 table-row children: not-inline
1711
BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x157.46875 table-cell [BFC] children: not-inline
18-
BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x157.46875 inline-block [BFC] children: not-inline
19-
BlockContainer <div.border-black> at (32,39.265625) content-size 28.6875x17.46875 children: inline
20-
line 0 width: 28.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
21-
frag 0 from TextNode start: 1, length: 3, rect: [32,39.265625 28.6875x17.46875]
22-
"one"
23-
TextNode <#text>
24-
BlockContainer <div.border-black> at (32,76.734375) content-size 28.6875x100 children: inline
25-
line 0 width: 28.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
26-
frag 0 from TextNode start: 1, length: 3, rect: [32,76.734375 28.4375x17.46875]
27-
"two"
28-
TextNode <#text>
12+
BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x0 children: inline
13+
TextNode <#text>
14+
BlockContainer <div.border-black> at (32,39.265625) content-size 28.6875x17.46875 children: inline
15+
line 0 width: 28.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
16+
frag 0 from TextNode start: 1, length: 3, rect: [32,39.265625 28.6875x17.46875]
17+
"one"
18+
TextNode <#text>
19+
BlockContainer <(anonymous)> at (22,66.734375) content-size 48.6875x0 children: inline
20+
TextNode <#text>
21+
BlockContainer <div.border-black> at (32,76.734375) content-size 28.6875x100 children: inline
22+
line 0 width: 28.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
23+
frag 0 from TextNode start: 1, length: 3, rect: [32,76.734375 28.4375x17.46875]
24+
"two"
25+
TextNode <#text>
26+
BlockContainer <(anonymous)> at (22,186.734375) content-size 48.6875x0 children: inline
27+
TextNode <#text>
2928

3029
PaintableWithLines (Viewport<#document>) [0,0 800x600]
3130
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
3231
PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
3332
PaintableWithLines (BlockContainer<BUTTON>.button.border-black) [8,8 76.6875x200]
34-
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x0]
35-
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x0]
36-
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x0]
3733
PaintableWithLines (TableWrapper(anonymous)) [22,19 48.6875x178]
3834
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x178]
3935
PaintableBox (Box(anonymous)) [22,19 48.6875x178]
4036
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x178]
41-
PaintableWithLines (BlockContainer(anonymous)) [22,29.265625 48.6875x157.46875]
42-
PaintableWithLines (BlockContainer<DIV>.border-black) [22,29.265625 48.6875x37.46875]
43-
TextPaintable (TextNode<#text>)
44-
PaintableWithLines (BlockContainer<DIV>.border-black) [22,66.734375 48.6875x120]
45-
TextPaintable (TextNode<#text>)
37+
PaintableWithLines (BlockContainer(anonymous)) [22,29.265625 48.6875x0]
38+
PaintableWithLines (BlockContainer<DIV>.border-black) [22,29.265625 48.6875x37.46875]
39+
TextPaintable (TextNode<#text>)
40+
PaintableWithLines (BlockContainer(anonymous)) [22,66.734375 48.6875x0]
41+
PaintableWithLines (BlockContainer<DIV>.border-black) [22,66.734375 48.6875x120]
42+
TextPaintable (TextNode<#text>)
43+
PaintableWithLines (BlockContainer(anonymous)) [22,186.734375 48.6875x0]

‎Tests/LibWeb/Layout/expected/block-and-inline/button-with-multiple-words-text-node-label.txt

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
2+
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
3+
BlockContainer <body> at (8,8) content-size 784x21.46875 children: inline
4+
line 0 width: 59.921875, height: 21.46875, bottom: 21.46875, baseline: 19.46875
5+
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17.46875]
6+
BlockContainer <button> at (13,10) content-size 49.921875x17.46875 inline-block [BFC] children: inline
7+
line 0 width: 49.921875, height: 17.46875, bottom: 17.46875, baseline: 17.46875
8+
frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 49.921875x17.46875]
9+
TableWrapper <(anonymous)> at (13,10) content-size 49.921875x17.46875 [BFC] children: not-inline
10+
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17.46875 table-box [TFC] children: not-inline
11+
Box <(anonymous)> at (13,10) content-size 49.921875x17.46875 table-row children: not-inline
12+
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17.46875 table-cell [BFC] children: inline
13+
line 0 width: 49.921875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
14+
frag 0 from TextNode start: 0, length: 5, rect: [13,10 49.921875x17.46875]
15+
"A B C"
16+
TextNode <#text>
17+
18+
PaintableWithLines (Viewport<#document>) [0,0 800x600]
19+
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
20+
PaintableWithLines (BlockContainer<BODY>) [8,8 784x21.46875]
21+
PaintableWithLines (BlockContainer<BUTTON>) [8,8 59.921875x21.46875]
22+
PaintableWithLines (TableWrapper(anonymous)) [13,10 49.921875x17.46875]
23+
PaintableWithLines (BlockContainer(anonymous)) [13,10 49.921875x17.46875]
24+
PaintableBox (Box(anonymous)) [13,10 49.921875x17.46875]
25+
PaintableWithLines (BlockContainer(anonymous)) [13,10 49.921875x17.46875]
26+
TextPaintable (TextNode<#text>)

‎Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label.txt

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
2+
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
3+
BlockContainer <body> at (8,8) content-size 784x21.46875 children: inline
4+
line 0 width: 47.21875, height: 21.46875, bottom: 21.46875, baseline: 19.46875
5+
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17.46875]
6+
BlockContainer <button> at (13,10) content-size 37.21875x17.46875 inline-block [BFC] children: inline
7+
line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 17.46875
8+
frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 37.21875x17.46875]
9+
TableWrapper <(anonymous)> at (13,10) content-size 37.21875x17.46875 [BFC] children: not-inline
10+
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17.46875 table-box [TFC] children: not-inline
11+
Box <(anonymous)> at (13,10) content-size 37.21875x17.46875 table-row children: not-inline
12+
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17.46875 table-cell [BFC] children: inline
13+
line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
14+
frag 0 from TextNode start: 0, length: 4, rect: [13,10 37.21875x17.46875]
15+
"Test"
16+
TextNode <#text>
17+
18+
PaintableWithLines (Viewport<#document>) [0,0 800x600]
19+
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
20+
PaintableWithLines (BlockContainer<BODY>) [8,8 784x21.46875]
21+
PaintableWithLines (BlockContainer<BUTTON>) [8,8 47.21875x21.46875]
22+
PaintableWithLines (TableWrapper(anonymous)) [13,10 37.21875x17.46875]
23+
PaintableWithLines (BlockContainer(anonymous)) [13,10 37.21875x17.46875]
24+
PaintableBox (Box(anonymous)) [13,10 37.21875x17.46875]
25+
PaintableWithLines (BlockContainer(anonymous)) [13,10 37.21875x17.46875]
26+
TextPaintable (TextNode<#text>)

‎Tests/LibWeb/Layout/expected/table/table-cell-not-paintable.txt

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
33
BlockContainer <body> at (8,8) content-size 784x17.46875 children: inline
44
line 0 width: 10, height: 17.46875, bottom: 17.46875, baseline: 13.53125
55
frag 0 from BlockContainer start: 0, length: 0, rect: [13,19 0x0]
6-
BlockContainer <button> at (13,19) content-size 0x0 inline-block [BFC] children: inline
7-
TextNode <#text>
8-
TableWrapper <(anonymous)> (not painted) [BFC] children: not-inline
9-
BlockContainer <(anonymous)> (not painted) table-box [TFC] children: not-inline
10-
Box <(anonymous)> (not painted) table-row children: not-inline
11-
BlockContainer <(anonymous)> (not painted) table-cell [BFC] children: not-inline
12-
BlockContainer <(anonymous)> (not painted) inline-block [BFC] children: not-inline
6+
BlockContainer <button> at (13,19) content-size 0x0 inline-block [BFC] children: not-inline
7+
TableWrapper <(anonymous)> at (13,19) content-size 0x0 [BFC] children: not-inline
8+
BlockContainer <(anonymous)> at (13,19) content-size 0x0 table-box [TFC] children: not-inline
9+
Box <(anonymous)> at (13,19) content-size 0x0 table-row children: not-inline
10+
BlockContainer <(anonymous)> at (13,19) content-size 0x0 table-cell [BFC] children: not-inline
1311

1412
PaintableWithLines (Viewport<#document>) [0,0 800x600]
1513
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
1614
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875]
1715
PaintableWithLines (BlockContainer<BUTTON>) [8,17 10x4]
16+
PaintableWithLines (TableWrapper(anonymous)) [13,19 0x0]
17+
PaintableWithLines (BlockContainer(anonymous)) [13,19 0x0]
18+
PaintableBox (Box(anonymous)) [13,19 0x0]
19+
PaintableWithLines (BlockContainer(anonymous)) [13,19 0x0]

‎Tests/LibWeb/Layout/input/block-and-inline/button-with-multiple-words-text-node-label.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<button>A B C</button>

‎Tests/LibWeb/Layout/input/block-and-inline/button-with-text-node-label.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<button>Test</button>

‎Tests/LibWeb/Layout/input/table/table-cell-not-paintable.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
<button type="button">
2-
</button>
1+
<button type="button"></button>

‎Userland/Libraries/LibWeb/Layout/Node.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,7 @@ class NodeWithStyle : public Node {
207207

208208
Gfx::Font const& font() const { return *m_font; }
209209
CSSPixels line_height() const { return m_line_height; }
210+
void set_line_height(CSSPixels line_height) { m_line_height = line_height; }
210211
Vector<CSS::BackgroundLayerData> const& background_layers() const { return computed_values().background_layers(); }
211212
const CSS::AbstractImageStyleValue* list_style_image() const { return m_list_style_image; }
212213

‎Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -387,27 +387,28 @@ ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::
387387
auto cell_computed_values = CSS::ComputedValues();
388388
static_cast<CSS::MutableComputedValues&>(cell_computed_values).set_display(CSS::Display { CSS::Display::Internal::TableCell });
389389
static_cast<CSS::MutableComputedValues&>(cell_computed_values).set_vertical_align(CSS::VerticalAlign::Middle);
390+
static_cast<CSS::MutableComputedValues&>(cell_computed_values).set_white_space(CSS::WhiteSpace::Nowrap);
390391

391392
auto flow_root_computed_values = CSS::ComputedValues();
392393
static_cast<CSS::MutableComputedValues&>(flow_root_computed_values).set_width(CSS::Size::make_percentage(CSS::Percentage(100)));
393394
static_cast<CSS::MutableComputedValues&>(flow_root_computed_values).set_display(CSS::Display::from_short(CSS::Display::Short::InlineBlock));
394395

395396
auto table_wrapper = parent.heap().template allocate_without_realm<BlockContainer>(parent.document(), nullptr, move(table_computed_values));
396397
auto cell_wrapper = parent.heap().template allocate_without_realm<BlockContainer>(parent.document(), nullptr, move(cell_computed_values));
397-
auto flow_root_wrapper = parent.heap().template allocate_without_realm<BlockContainer>(parent.document(), nullptr, move(flow_root_computed_values));
398+
399+
cell_wrapper->set_line_height(parent.line_height());
400+
cell_wrapper->set_children_are_inline(parent.children_are_inline());
398401

399402
Vector<JS::Handle<Node>> sequence;
400403
for (auto child = parent.first_child(); child; child = child->next_sibling()) {
401-
if (!is_ignorable_whitespace(*child))
402-
sequence.append(*child);
404+
sequence.append(*child);
403405
}
404406

405407
for (auto& node : sequence) {
406408
parent.remove_child(*node);
407-
flow_root_wrapper->append_child(*node);
409+
cell_wrapper->append_child(*node);
408410
}
409411

410-
cell_wrapper->append_child(*flow_root_wrapper);
411412
table_wrapper->append_child(*cell_wrapper);
412413
parent.append_child(*table_wrapper);
413414
}

0 commit comments

Comments
 (0)