From 69ea3dfe3a4204ccebdb4ce2dea17326691c5608 Mon Sep 17 00:00:00 2001
From: Mouad Debbar <mdebbar@google.com>
Date: Fri, 6 Nov 2020 12:33:35 -0800
Subject: [PATCH] [web] Tests for rich paragraph DOM

---
 .../lib/src/engine/text/canvas_paragraph.dart |  1 +
 lib/web_ui/lib/src/engine/text/paragraph.dart |  3 ++
 .../text/canvas_paragraph_builder_test.dart   | 49 +++++++++++++++++--
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/lib/web_ui/lib/src/engine/text/canvas_paragraph.dart b/lib/web_ui/lib/src/engine/text/canvas_paragraph.dart
index 03d8175bee1de..596cfdc087fad 100644
--- a/lib/web_ui/lib/src/engine/text/canvas_paragraph.dart
+++ b/lib/web_ui/lib/src/engine/text/canvas_paragraph.dart
@@ -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(
diff --git a/lib/web_ui/lib/src/engine/text/paragraph.dart b/lib/web_ui/lib/src/engine/text/paragraph.dart
index 34dde2c94e748..44db9c4e89606 100644
--- a/lib/web_ui/lib/src/engine/text/paragraph.dart
+++ b/lib/web_ui/lib/src/engine/text/paragraph.dart
@@ -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';
   }
diff --git a/lib/web_ui/test/text/canvas_paragraph_builder_test.dart b/lib/web_ui/test/text/canvas_paragraph_builder_test.dart
index f5b367efdede5..bb6f197c40aa9 100644
--- a/lib/web_ui/test/text/canvas_paragraph_builder_test.dart
+++ b/lib/web_ui/test/text/canvas_paragraph_builder_test.dart
@@ -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;