Skip to content

Commit acad21c

Browse files
mdebbarmdebbar
authored
[web] Tests for rich paragraph DOM (#23097)
1 parent 8854520 commit acad21c

File tree

3 files changed

+50
-3
lines changed

3 files changed

+50
-3
lines changed

‎lib/web_ui/lib/src/engine/text/canvas_paragraph.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ class CanvasParagraph implements EngineParagraph {
154154
style: span.style,
155155
isSpan: true,
156156
);
157+
domRenderer.appendText(spanElement, span.textOf(this));
157158
domRenderer.append(element, spanElement);
158159
} else if (span is PlaceholderSpan) {
159160
domRenderer.append(

‎lib/web_ui/lib/src/engine/text/paragraph.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1751,6 +1751,9 @@ void _applyTextStyleToElement({
17511751
if (color != null) {
17521752
cssStyle.color = colorToCssString(color);
17531753
}
1754+
if (style._height != null) {
1755+
cssStyle.lineHeight = '${style._height}';
1756+
}
17541757
if (style._fontSize != null) {
17551758
cssStyle.fontSize = '${style._fontSize!.floor()}px';
17561759
}

‎lib/web_ui/test/text/canvas_paragraph_builder_test.dart‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ import 'package:test/test.dart';
88
import 'package:ui/src/engine.dart';
99
import 'package:ui/ui.dart';
1010

11+
const String paragraphStyle = 'style="position: absolute; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden;"';
12+
const String defaultColor = 'color: rgb(255, 0, 0);';
13+
const String defaultFontFamily = 'font-family: sans-serif;';
14+
const String defaultFontSize = 'font-size: 14px;';
15+
1116
void main() {
1217
internalBootstrapBrowserTest(() => testMain);
1318
}
@@ -17,9 +22,6 @@ void testMain() {
1722
WebExperiments.ensureInitialized();
1823
});
1924

20-
// TODO(mdebbar): Add checks for the output of `toDomElement()` in all the
21-
// tests below.
22-
2325
test('Builds a text-only canvas paragraph', () {
2426
final EngineParagraphStyle style = EngineParagraphStyle(fontSize: 13.0);
2527
final CanvasParagraphBuilder builder = CanvasParagraphBuilder(style);
@@ -29,6 +31,10 @@ void testMain() {
2931
final CanvasParagraph paragraph = builder.build();
3032
expect(paragraph.paragraphStyle, style);
3133
expect(paragraph.toPlainText(), 'Hello');
34+
expect(
35+
paragraph.toDomElement().outerHtml,
36+
'<p $paragraphStyle><span style="$defaultColor font-size: 13px; $defaultFontFamily">Hello</span></p>',
37+
);
3238
expect(paragraph.spans, hasLength(1));
3339

3440
final ParagraphSpan span = paragraph.spans.single;
@@ -47,6 +53,10 @@ void testMain() {
4753
final CanvasParagraph paragraph = builder.build();
4854
expect(paragraph.paragraphStyle, style);
4955
expect(paragraph.toPlainText(), 'Hello');
56+
expect(
57+
paragraph.toDomElement().outerHtml,
58+
'<p $paragraphStyle><span style="$defaultColor $defaultFontSize $defaultFontFamily">Hello</span></p>',
59+
);
5060
expect(paragraph.spans, hasLength(1));
5161

5262
final FlatTextSpan textSpan = paragraph.spans.single as FlatTextSpan;
@@ -68,6 +78,14 @@ void testMain() {
6878

6979
final CanvasParagraph paragraph = builder.build();
7080
expect(paragraph.toPlainText(), 'Hello');
81+
expect(
82+
paragraph.toDomElement().outerHtml,
83+
'<p $paragraphStyle>'
84+
'<span style="$defaultColor line-height: 1.5; font-size: 9px; font-weight: bold; font-style: italic; $defaultFontFamily letter-spacing: 2px;">'
85+
'Hello'
86+
'</span>'
87+
'</p>',
88+
);
7189
expect(paragraph.spans, hasLength(1));
7290

7391
final FlatTextSpan span = paragraph.spans.single as FlatTextSpan;
@@ -96,6 +114,17 @@ void testMain() {
96114

97115
final CanvasParagraph paragraph = builder.build();
98116
expect(paragraph.toPlainText(), 'Hello world');
117+
expect(
118+
paragraph.toDomElement().outerHtml,
119+
'<p $paragraphStyle>'
120+
'<span style="$defaultColor font-size: 13px; font-weight: bold; $defaultFontFamily">'
121+
'Hello'
122+
'</span>'
123+
'<span style="$defaultColor font-size: 13px; font-style: italic; $defaultFontFamily">'
124+
' world'
125+
'</span>'
126+
'</p>',
127+
);
99128
expect(paragraph.spans, hasLength(2));
100129

101130
final FlatTextSpan hello = paragraph.spans.first as FlatTextSpan;
@@ -134,6 +163,20 @@ void testMain() {
134163

135164
final CanvasParagraph paragraph = builder.build();
136165
expect(paragraph.toPlainText(), 'Hello world!');
166+
expect(
167+
paragraph.toDomElement().outerHtml,
168+
'<p $paragraphStyle>'
169+
'<span style="$defaultColor line-height: 2; font-size: 13px; font-weight: bold; $defaultFontFamily">'
170+
'Hello'
171+
'</span>'
172+
'<span style="$defaultColor font-size: 13px; font-weight: bold; font-style: italic; $defaultFontFamily">'
173+
' world'
174+
'</span>'
175+
'<span style="$defaultColor font-size: 13px; font-weight: normal; font-style: italic; $defaultFontFamily">'
176+
'!'
177+
'</span>'
178+
'</p>',
179+
);
137180
expect(paragraph.spans, hasLength(3));
138181

139182
final FlatTextSpan hello = paragraph.spans[0] as FlatTextSpan;

0 commit comments

Comments
 (0)