[web] Implement font features in the html renderer (flutter#25088)

llcxyz · Mar 23, 2021 · d5537c2 · d5537c2
1 parent 76d008c
commit d5537c2
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml
@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: b86dc52ac1c8725ea17c50d9a7704687b5252833
+revision: c5f999871e83142afb82a636e97bd67a62789c6e
diff --git a/lib/web_ui/lib/src/engine/text/paragraph.dart b/lib/web_ui/lib/src/engine/text/paragraph.dart
@@ -1825,6 +1825,11 @@ void _applyTextStyleToElement({
       }
     }
   }
+
+  final List<ui.FontFeature>? fontFeatures = style._fontFeatures;
+  if (fontFeatures != null && fontFeatures.isNotEmpty) {
+    cssStyle.fontFeatureSettings = _fontFeatureListToCss(fontFeatures);
+  }
 }
 
 html.Element _createPlaceholderElement({
@@ -1894,6 +1899,22 @@ String _shadowListToCss(List<ui.Shadow> shadows) {
   return sb.toString();
 }
 
+String _fontFeatureListToCss(List<ui.FontFeature> fontFeatures) {
+  assert(fontFeatures.isNotEmpty);
+
+  // For more details, see:
+  // * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
+  StringBuffer sb = new StringBuffer();
+  for (int i = 0, len = fontFeatures.length; i < len; i++) {
+    if (i != 0) {
+      sb.write(',');
+    }
+    ui.FontFeature fontFeature = fontFeatures[i];
+    sb.write('"${fontFeature.feature}" ${fontFeature.value}');
+  }
+  return sb.toString();
+}
+
 /// Applies background color properties in text style to paragraph or span
 /// elements.
 void _applyTextBackgroundToElement({

diff --git a/lib/web_ui/test/golden_tests/engine/canvas_paragraph/general_test.dart b/lib/web_ui/test/golden_tests/engine/canvas_paragraph/general_test.dart
@@ -312,4 +312,51 @@ void testMain() async {
     canvas.drawParagraph(paragraph, Offset.zero);
     return takeScreenshot(canvas, bounds, 'canvas_paragraph_decoration');
   });
+
+  void testFontFeatures(EngineCanvas canvas) {
+    final String text = 'Aa Bb Dd Ee Ff';
+    final FontFeature enableSmallCaps = FontFeature('smcp');
+    final FontFeature disableSmallCaps = FontFeature('smcp', 0);
+    final CanvasParagraph paragraph = rich(
+      ParagraphStyle(fontFamily: 'Roboto'),
+      (CanvasParagraphBuilder builder) {
+        builder.pushStyle(EngineTextStyle.only(
+          height: 2,
+          color: black,
+          fontSize: 32.0,
+        ));
+        builder.addText('Small Caps: ');
+        builder.pushStyle(EngineTextStyle.only(
+          color: blue,
+          fontFeatures: <FontFeature>[enableSmallCaps],
+        ));
+        builder.addText('$text\n');
+        // Make sure disabling a font feature also works.
+        builder.pushStyle(EngineTextStyle.only(
+          color: black,
+          fontFeatures: <FontFeature>[disableSmallCaps],
+        ));
+        builder.addText('Normal Caps: ');
+        builder.pushStyle(EngineTextStyle.only(
+          color: blue,
+        ));
+        builder.addText(text);
+      },
+    )..layout(constrain(double.infinity));
+    canvas.drawParagraph(paragraph, Offset.zero);
+  }
+
+  test('font features', () {
+    const Rect bounds = Rect.fromLTWH(0, 0, 500, 300);
+    final canvas = BitmapCanvas(bounds, RenderStrategy());
+    testFontFeatures(canvas);
+    return takeScreenshot(canvas, bounds, 'canvas_paragraph_font_features');
+  });
+
+  test('font features (DOM)', () {
+    const Rect bounds = Rect.fromLTWH(0, 0, 500, 300);
+    final canvas = DomCanvas(domRenderer.createElement('flt-picture'));
+    testFontFeatures(canvas);
+    return takeScreenshot(canvas, bounds, 'canvas_paragraph_font_features_dom');
+  });
 }