Skip to content

Commit c22023c

Browse files
mikiubomikiubo
committed
LibWeb: Add synthetic height for contenteditable elements
Contenteditable elements that would otherwise have zero height now get a minimum height equal to their line-height. This ensures they remain clickable and usable for text editing. This fixes the WPT test: contenteditable/synthetic-height.html
1 parent 9d515ec commit c22023c

File tree

4 files changed

+89
-50
lines changed

4 files changed

+89
-50
lines changed

‎Libraries/LibWeb/Layout/BlockFormattingContext.cpp‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -672,6 +672,15 @@ CSSPixels BlockFormattingContext::compute_auto_height_for_block_level_element(Bo
672672
}
673673
}
674674

675+
// AD-HOC: Contenteditable elements must have a minimum height (line-height) when empty, to remain clickable and
676+
// usable for text input, even though this is not specified.
677+
// See: https://github.com/w3c/editing/issues/70.
678+
if (box.dom_node() && !box.is_anonymous() && !box.is_generated_for_pseudo_element()) {
679+
if (auto const* element = as_if<DOM::Element>(box.dom_node()); element && element->is_editing_host()) {
680+
return box.computed_values().line_height();
681+
}
682+
}
683+
675684
// 4. zero, otherwise
676685
return 0;
677686
}

‎Tests/LibWeb/Layout/expected/empty-editable-shows-cursor.txt‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,86 @@
11
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline
2-
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 52 0+0+0] [BFC] children: not-inline
2+
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 70 0+0+0] [BFC] children: not-inline
33
BlockContainer <(anonymous)> at [0,0] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
44
TextNode <#text> (not painted)
5-
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 36 0+0+8] children: not-inline
5+
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 54 0+0+8] children: not-inline
66
BlockContainer <(anonymous)> at [8,8] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
77
TextNode <#text> (not painted)
8-
BlockContainer <div> at [8,8] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: not-inline
9-
BlockContainer <(anonymous)> at [8,8] [0+0+0 784 0+0+0] [0+0+0 36 0+0+0] children: inline
10-
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 200x20] baseline: 14.796875
11-
frag 1 from TextNode start: 0, length: 1, rect: [210,9 8x18] baseline: 13.796875
8+
BlockContainer <div> at [8,8] [0+0+0 784 0+0+0] [0+0+0 18 0+0+0] children: not-inline
9+
BlockContainer <(anonymous)> at [8,26] [0+0+0 784 0+0+0] [0+0+0 36 0+0+0] children: inline
10+
frag 0 from BlockContainer start: 0, length: 0, rect: [9,27 200x20] baseline: 14.796875
11+
frag 1 from TextNode start: 0, length: 1, rect: [210,27 8x18] baseline: 13.796875
1212
" "
13-
frag 2 from BlockContainer start: 0, length: 0, rect: [221,11 160x30] baseline: 14.390625
14-
frag 3 from TextNode start: 0, length: 1, rect: [384,9 8x18] baseline: 13.796875
13+
frag 2 from BlockContainer start: 0, length: 0, rect: [221,29 160x30] baseline: 14.390625
14+
frag 3 from TextNode start: 0, length: 1, rect: [384,27 8x18] baseline: 13.796875
1515
" "
16-
frag 4 from BlockContainer start: 0, length: 0, rect: [393,9 200x20] baseline: 14.796875
17-
frag 5 from TextNode start: 0, length: 1, rect: [594,9 8x18] baseline: 13.796875
16+
frag 4 from BlockContainer start: 0, length: 0, rect: [393,27 200x20] baseline: 14.796875
17+
frag 5 from TextNode start: 0, length: 1, rect: [594,27 8x18] baseline: 13.796875
1818
" "
19-
frag 6 from BlockContainer start: 0, length: 0, rect: [605,11 160x30] baseline: 14.390625
19+
frag 6 from BlockContainer start: 0, length: 0, rect: [605,29 160x30] baseline: 14.390625
2020
TextNode <#text> (not painted)
21-
BlockContainer <input> at [9,9] inline-block [0+1+0 200 0+1+0] [0+1+0 20 0+1+0] [BFC] children: not-inline
22-
Box <div> at [11,10] flex-container(row) [0+0+2 196 2+0+0] [0+0+1 18 1+0+0] [FFC] children: not-inline
23-
BlockContainer <div> at [11,10] flex-item [0+0+0 0 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
24-
frag 0 from TextNode start: 0, length: 0, rect: [11,10 0x18] baseline: 13.796875
21+
BlockContainer <input> at [9,27] inline-block [0+1+0 200 0+1+0] [0+1+0 20 0+1+0] [BFC] children: not-inline
22+
Box <div> at [11,28] flex-container(row) [0+0+2 196 2+0+0] [0+0+1 18 1+0+0] [FFC] children: not-inline
23+
BlockContainer <div> at [11,28] flex-item [0+0+0 0 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
24+
frag 0 from TextNode start: 0, length: 0, rect: [11,28 0x18] baseline: 13.796875
2525
TextNode <#text> (not painted)
26-
BlockContainer <div> at [11,10] flex-item [0+0+0 196 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
27-
frag 0 from TextNode start: 0, length: 5, rect: [11,10 36.84375x18] baseline: 13.796875
26+
BlockContainer <div> at [11,28] flex-item [0+0+0 196 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
27+
frag 0 from TextNode start: 0, length: 5, rect: [11,28 36.84375x18] baseline: 13.796875
2828
"hello"
2929
TextNode <#text> (not painted)
3030
TextNode <#text> (not painted)
31-
BlockContainer <textarea> at [221,11] inline-block [0+1+2 160 2+1+0] [0+1+2 30 2+1+0] [BFC] children: not-inline
32-
BlockContainer <div> at [221,11] [0+0+0 160 0+0+0] [0+0+0 15 0+0+0] children: inline
33-
InlineNode <div> at [221,11] [0+0+0 0 0+0+0] [0+0+0 15 0+0+0]
34-
frag 0 from TextNode start: 0, length: 0, rect: [221,11 0x15] baseline: 11.390625
31+
BlockContainer <textarea> at [221,29] inline-block [0+1+2 160 2+1+0] [0+1+2 30 2+1+0] [BFC] children: not-inline
32+
BlockContainer <div> at [221,29] [0+0+0 160 0+0+0] [0+0+0 15 0+0+0] children: inline
33+
InlineNode <div> at [221,29] [0+0+0 0 0+0+0] [0+0+0 15 0+0+0]
34+
frag 0 from TextNode start: 0, length: 0, rect: [221,29 0x15] baseline: 11.390625
3535
TextNode <#text> (not painted)
36-
InlineNode <div> at [221,11] [0+0+0 29.921875 0+0+0] [0+0+0 15 0+0+0]
37-
frag 0 from TextNode start: 0, length: 5, rect: [221,11 29.921875x15] baseline: 11.390625
36+
InlineNode <div> at [221,29] [0+0+0 29.921875 0+0+0] [0+0+0 15 0+0+0]
37+
frag 0 from TextNode start: 0, length: 5, rect: [221,29 29.921875x15] baseline: 11.390625
3838
"hello"
3939
TextNode <#text> (not painted)
4040
TextNode <#text> (not painted)
41-
BlockContainer <input> at [393,9] inline-block [0+1+0 200 0+1+0] [0+1+0 20 0+1+0] [BFC] children: not-inline
42-
Box <div> at [395,10] flex-container(row) [0+0+2 196 2+0+0] [0+0+1 18 1+0+0] [FFC] children: not-inline
43-
BlockContainer <div> at [395,10] flex-item [0+0+0 196 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
44-
frag 0 from TextNode start: 0, length: 0, rect: [395,10 0x18] baseline: 13.796875
41+
BlockContainer <input> at [393,27] inline-block [0+1+0 200 0+1+0] [0+1+0 20 0+1+0] [BFC] children: not-inline
42+
Box <div> at [395,28] flex-container(row) [0+0+2 196 2+0+0] [0+0+1 18 1+0+0] [FFC] children: not-inline
43+
BlockContainer <div> at [395,28] flex-item [0+0+0 196 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
44+
frag 0 from TextNode start: 0, length: 0, rect: [395,28 0x18] baseline: 13.796875
4545
TextNode <#text> (not painted)
4646
TextNode <#text> (not painted)
47-
BlockContainer <textarea> at [605,11] inline-block [0+1+2 160 2+1+0] [0+1+2 30 2+1+0] [BFC] children: not-inline
48-
BlockContainer <div> at [605,11] [0+0+0 160 0+0+0] [0+0+0 15 0+0+0] children: not-inline
49-
BlockContainer <div> at [605,11] [0+0+0 160 0+0+0] [0+0+0 15 0+0+0] children: inline
50-
frag 0 from TextNode start: 0, length: 0, rect: [605,11 0x15] baseline: 11.390625
47+
BlockContainer <textarea> at [605,29] inline-block [0+1+2 160 2+1+0] [0+1+2 30 2+1+0] [BFC] children: not-inline
48+
BlockContainer <div> at [605,29] [0+0+0 160 0+0+0] [0+0+0 15 0+0+0] children: not-inline
49+
BlockContainer <div> at [605,29] [0+0+0 160 0+0+0] [0+0+0 15 0+0+0] children: inline
50+
frag 0 from TextNode start: 0, length: 0, rect: [605,29 0x15] baseline: 11.390625
5151
TextNode <#text> (not painted)
5252
TextNode <#text> (not painted)
5353

5454
ViewportPaintable (Viewport<#document>) [0,0 800x600]
55-
PaintableWithLines (BlockContainer<HTML>) [0,0 800x52]
55+
PaintableWithLines (BlockContainer<HTML>) [0,0 800x70]
5656
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
57-
PaintableWithLines (BlockContainer<BODY>) [8,8 784x36]
57+
PaintableWithLines (BlockContainer<BODY>) [8,8 784x54]
5858
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
59-
PaintableWithLines (BlockContainer<DIV>) [8,8 784x0]
60-
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x36]
61-
PaintableWithLines (BlockContainer<INPUT>) [8,8 202x22]
62-
PaintableBox (Box<DIV>) [9,9 200x20]
63-
PaintableWithLines (BlockContainer<DIV>) [11,10 0x18]
59+
PaintableWithLines (BlockContainer<DIV>) [8,8 784x18]
60+
PaintableWithLines (BlockContainer(anonymous)) [8,26 784x36]
61+
PaintableWithLines (BlockContainer<INPUT>) [8,26 202x22]
62+
PaintableBox (Box<DIV>) [9,27 200x20]
63+
PaintableWithLines (BlockContainer<DIV>) [11,28 0x18]
6464
TextPaintable (TextNode<#text>)
65-
PaintableWithLines (BlockContainer<DIV>) [11,10 196x18]
65+
PaintableWithLines (BlockContainer<DIV>) [11,28 196x18]
6666
TextPaintable (TextNode<#text>)
6767
TextPaintable (TextNode<#text>)
68-
PaintableWithLines (BlockContainer<TEXTAREA>) [218,8 166x36]
69-
PaintableWithLines (BlockContainer<DIV>) [221,11 160x15]
70-
PaintableWithLines (InlineNode<DIV>) [221,11 0x15]
68+
PaintableWithLines (BlockContainer<TEXTAREA>) [218,26 166x36]
69+
PaintableWithLines (BlockContainer<DIV>) [221,29 160x15]
70+
PaintableWithLines (InlineNode<DIV>) [221,29 0x15]
7171
TextPaintable (TextNode<#text>)
72-
PaintableWithLines (InlineNode<DIV>) [221,11 29.921875x15]
72+
PaintableWithLines (InlineNode<DIV>) [221,29 29.921875x15]
7373
TextPaintable (TextNode<#text>)
7474
TextPaintable (TextNode<#text>)
75-
PaintableWithLines (BlockContainer<INPUT>) [392,8 202x22]
76-
PaintableBox (Box<DIV>) [393,9 200x20]
77-
PaintableWithLines (BlockContainer<DIV>) [395,10 196x18]
75+
PaintableWithLines (BlockContainer<INPUT>) [392,26 202x22]
76+
PaintableBox (Box<DIV>) [393,27 200x20]
77+
PaintableWithLines (BlockContainer<DIV>) [395,28 196x18]
7878
TextPaintable (TextNode<#text>)
7979
TextPaintable (TextNode<#text>)
80-
PaintableWithLines (BlockContainer<TEXTAREA>) [602,8 166x36]
81-
PaintableWithLines (BlockContainer<DIV>) [605,11 160x15]
82-
PaintableWithLines (BlockContainer<DIV>) [605,11 160x15]
80+
PaintableWithLines (BlockContainer<TEXTAREA>) [602,26 166x36]
81+
PaintableWithLines (BlockContainer<DIV>) [605,29 160x15]
82+
PaintableWithLines (BlockContainer<DIV>) [605,29 160x15]
8383
TextPaintable (TextNode<#text>)
8484

8585
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
86-
SC for BlockContainer<HTML> [0,0 800x52] [children: 0] (z-index: auto)
86+
SC for BlockContainer<HTML> [0,0 800x70] [children: 0] (z-index: auto)

‎Tests/LibWeb/Ref/expected/wpt-import/contenteditable/synthetic-height-ref.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<title>CSS test reference</title>
3+
<style>
4+
div { background: green; border: 1px solid; }
5+
</style>
6+
<div><br></div>
7+
<div><br></div>
8+
<div><br></div>
9+
<div><br></div>

‎Tests/LibWeb/Ref/input/wpt-import/contenteditable/synthetic-height.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<title>contenteditable causes blocks to have a synthesized height</title>
3+
<link rel="author" href="mailto:[email protected]" title="Emilio Cobos Álvarez">
4+
<link rel="author" href="https://mozilla.org" title="Mozilla">
5+
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1098151">
6+
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1634543">
7+
<link rel="help" href="https://github.com/w3c/editing/issues/70">
8+
<link rel="match" href="../../../expected/wpt-import/contenteditable/synthetic-height-ref.html">
9+
<style>
10+
div { background: green; border: 1px solid; }
11+
.pseudo::before {
12+
content: "";
13+
}
14+
.abspos-pseudo::before {
15+
position: absolute;
16+
}
17+
</style>
18+
<div contenteditable></div>
19+
<div contenteditable><span style="position: absolute"></span></div>
20+
<div contenteditable class="pseudo"></div>
21+
<div contenteditable class="pseudo abspos-pseudo"></div>

0 commit comments

Comments
 (0)