DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[web] Tests for rich paragraph DOM (#23097)

Browse Source
This commit is contained in:
Mouad Debbar 2020-12-16 17:05:04 -08:00 committed by GitHub
parent 8854520864
commit acad21c190
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/web_ui/lib/src/engine/text/canvas_paragraph.dart
View File

@ -154,6 +154,7 @@ class CanvasParagraph implements EngineParagraph {
style: span.style,
isSpan: true,
);
domRenderer.appendText(spanElement, span.textOf(this));
domRenderer.append(element, spanElement);
} else if (span is PlaceholderSpan) {
domRenderer.append(

3
lib/web_ui/lib/src/engine/text/paragraph.dart
View File

@ -1751,6 +1751,9 @@ void _applyTextStyleToElement({
if (color != null) {
cssStyle.color = colorToCssString(color);
}
if (style._height != null) {
cssStyle.lineHeight = '${style._height}';
}
if (style._fontSize != null) {
cssStyle.fontSize = '${style._fontSize!.floor()}px';
}

49
lib/web_ui/test/text/canvas_paragraph_builder_test.dart
View File

@ -8,6 +8,11 @@ import 'package:test/test.dart';
import 'package:ui/src/engine.dart';
import 'package:ui/ui.dart';
const String paragraphStyle = 'style="position: absolute; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden;"';
const String defaultColor = 'color: rgb(255, 0, 0);';
const String defaultFontFamily = 'font-family: sans-serif;';
const String defaultFontSize = 'font-size: 14px;';
void main() {
internalBootstrapBrowserTest(() => testMain);
}
@ -17,9 +22,6 @@ void testMain() {
WebExperiments.ensureInitialized();
});
// TODO(mdebbar): Add checks for the output of `toDomElement()` in all the
// tests below.
test('Builds a text-only canvas paragraph', () {
final EngineParagraphStyle style = EngineParagraphStyle(fontSize: 13.0);
final CanvasParagraphBuilder builder = CanvasParagraphBuilder(style);
@ -29,6 +31,10 @@ void testMain() {
final CanvasParagraph paragraph = builder.build();
expect(paragraph.paragraphStyle, style);
expect(paragraph.toPlainText(), 'Hello');
expect(
paragraph.toDomElement().outerHtml,
'<p $paragraphStyle><span style="$defaultColor font-size: 13px; $defaultFontFamily">Hello</span></p>',
);
expect(paragraph.spans, hasLength(1));
final ParagraphSpan span = paragraph.spans.single;
@ -47,6 +53,10 @@ void testMain() {
final CanvasParagraph paragraph = builder.build();
expect(paragraph.paragraphStyle, style);
expect(paragraph.toPlainText(), 'Hello');
expect(
paragraph.toDomElement().outerHtml,
'<p $paragraphStyle><span style="$defaultColor $defaultFontSize $defaultFontFamily">Hello</span></p>',
);
expect(paragraph.spans, hasLength(1));
final FlatTextSpan textSpan = paragraph.spans.single as FlatTextSpan;
@ -68,6 +78,14 @@ void testMain() {
final CanvasParagraph paragraph = builder.build();
expect(paragraph.toPlainText(), 'Hello');
expect(
paragraph.toDomElement().outerHtml,
'<p $paragraphStyle>'
'<span style="$defaultColor line-height: 1.5; font-size: 9px; font-weight: bold; font-style: italic; $defaultFontFamily letter-spacing: 2px;">'
'Hello'
'</span>'
'</p>',
);
expect(paragraph.spans, hasLength(1));
final FlatTextSpan span = paragraph.spans.single as FlatTextSpan;
@ -96,6 +114,17 @@ void testMain() {
final CanvasParagraph paragraph = builder.build();
expect(paragraph.toPlainText(), 'Hello world');
expect(
paragraph.toDomElement().outerHtml,
'<p $paragraphStyle>'
'<span style="$defaultColor font-size: 13px; font-weight: bold; $defaultFontFamily">'
'Hello'
'</span>'
'<span style="$defaultColor font-size: 13px; font-style: italic; $defaultFontFamily">'
' world'
'</span>'
'</p>',
);
expect(paragraph.spans, hasLength(2));
final FlatTextSpan hello = paragraph.spans.first as FlatTextSpan;
@ -134,6 +163,20 @@ void testMain() {
final CanvasParagraph paragraph = builder.build();
expect(paragraph.toPlainText(), 'Hello world!');
expect(
paragraph.toDomElement().outerHtml,
'<p $paragraphStyle>'
'<span style="$defaultColor line-height: 2; font-size: 13px; font-weight: bold; $defaultFontFamily">'
'Hello'
'</span>'
'<span style="$defaultColor font-size: 13px; font-weight: bold; font-style: italic; $defaultFontFamily">'
' world'
'</span>'
'<span style="$defaultColor font-size: 13px; font-weight: normal; font-style: italic; $defaultFontFamily">'
'!'
'</span>'
'</p>',
);
expect(paragraph.spans, hasLength(3));
final FlatTextSpan hello = paragraph.spans[0] as FlatTextSpan;