diff --git a/lib/web_ui/lib/src/engine/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing.dart index e9a8244f739d..526899a5a184 100644 --- a/lib/web_ui/lib/src/engine/text_editing.dart +++ b/lib/web_ui/lib/src/engine/text_editing.dart @@ -667,13 +667,11 @@ class HybridTextEditing { /// to its CSS equivalent value. /// Converts index of TextAlign to enum value. _editingStyle = _EditingStyle( - textDirection: ui.TextDirection.values[textDirectionIndex], - fontSize: style['fontSize'], - textAlign: ui.TextAlign.values[textAlignIndex], - fontFamily: style['fontFamily'], - fontWeight: - fontWeightIndexToCss(fontWeightIndex: style['fontWeightIndex']), - ); + textDirection: ui.TextDirection.values[textDirectionIndex], + fontSize: style['fontSize'], + textAlign: ui.TextAlign.values[textAlignIndex], + fontFamily: style['fontFamily'], + fontWeightIndex: style['fontWeightIndex']); } /// Size and transform of the editable text on the page. @@ -767,8 +765,10 @@ class _EditingStyle { @required this.fontSize, @required this.textAlign, @required this.fontFamily, - this.fontWeight, - }); + @required fontWeightIndex, + }) : this.fontWeight = (fontWeightIndex != null) + ? fontWeightIndexToCss(fontWeightIndex: fontWeightIndex) + : 'normal'; /// This information will be used for changing the style of the hidden input /// element, which will match it's size to the size of the editable widget. diff --git a/lib/web_ui/test/text_editing_test.dart b/lib/web_ui/test/text_editing_test.dart index 6e53730c892b..8e80d001251e 100644 --- a/lib/web_ui/test/text_editing_test.dart +++ b/lib/web_ui/test/text_editing_test.dart @@ -472,22 +472,12 @@ void main() { textEditing.handleTextInput(codec.encodeMethodCall(setClient)); final MethodCall setSizeAndTransform = - MethodCall('TextInput.setEditableSizeAndTransform', { - 'width': 150, - 'height': 50, - 'transform': - Matrix4.translationValues(10.0, 20.0, 30.0).storage.toList() - }); + configureSetSizeAndTransformMethodCall(150, 50, + Matrix4.translationValues(10.0, 20.0, 30.0).storage.toList()); textEditing.handleTextInput(codec.encodeMethodCall(setSizeAndTransform)); - const MethodCall setStyle = - MethodCall('TextInput.setStyle', { - 'fontSize': 12, - 'fontFamily': 'sans-serif', - 'textAlignIndex': 4, - 'fontWeightIndex': 4, - 'textDirectionIndex': 1, - }); + final MethodCall setStyle = + configureSetStyleMethodCall(12, 'sans-serif', 4, 4, 1); textEditing.handleTextInput(codec.encodeMethodCall(setStyle)); const MethodCall setEditingState = @@ -522,6 +512,52 @@ void main() { expect(spy.messages, isEmpty); }); + test('input font set succesfully with null fontWeightIndex', () { + final MethodCall setClient = MethodCall( + 'TextInput.setClient', [123, flutterSinglelineConfig]); + textEditing.handleTextInput(codec.encodeMethodCall(setClient)); + + final MethodCall setSizeAndTransform = + configureSetSizeAndTransformMethodCall(150, 50, + Matrix4.translationValues(10.0, 20.0, 30.0).storage.toList()); + textEditing.handleTextInput(codec.encodeMethodCall(setSizeAndTransform)); + + final MethodCall setStyle = configureSetStyleMethodCall( + 12, 'sans-serif', 4, null /* fontWeightIndex */, 1); + textEditing.handleTextInput(codec.encodeMethodCall(setStyle)); + + const MethodCall setEditingState = + MethodCall('TextInput.setEditingState', { + 'text': 'abcd', + 'selectionBase': 2, + 'selectionExtent': 3, + }); + textEditing.handleTextInput(codec.encodeMethodCall(setEditingState)); + + const MethodCall show = MethodCall('TextInput.show'); + textEditing.handleTextInput(codec.encodeMethodCall(show)); + + final HtmlElement domElement = textEditing.editingElement.domElement; + + checkInputEditingState(domElement, 'abcd', 2, 3); + + // Check if the location and styling is correct. + expect( + domElement.getBoundingClientRect(), + Rectangle.fromPoints(const Point(10.0, 20.0), + const Point(160.0, 70.0))); + expect(domElement.style.transform, + 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 20, 30, 1)'); + expect( + textEditing.editingElement.domElement.style.font, '12px sans-serif'); + + const MethodCall clearClient = MethodCall('TextInput.clearClient'); + textEditing.handleTextInput(codec.encodeMethodCall(clearClient)); + + // Confirm that [HybridTextEditing] didn't send any messages. + expect(spy.messages, isEmpty); + }); + test('Syncs the editing state back to Flutter', () { final MethodCall setClient = MethodCall( 'TextInput.setClient', [123, flutterSinglelineConfig]); @@ -642,6 +678,26 @@ void main() { }); } +MethodCall configureSetStyleMethodCall(int fontSize, String fontFamily, + int textAlignIndex, int fontWeightIndex, int textDirectionIndex) { + return MethodCall('TextInput.setStyle', { + 'fontSize': fontSize, + 'fontFamily': fontFamily, + 'textAlignIndex': textAlignIndex, + 'fontWeightIndex': fontWeightIndex, + 'textDirectionIndex': textDirectionIndex, + }); +} + +MethodCall configureSetSizeAndTransformMethodCall( + int width, int height, List transform) { + return MethodCall('TextInput.setEditableSizeAndTransform', { + 'width': width, + 'height': height, + 'transform': transform + }); +} + void checkInputEditingState( InputElement input, String text, int start, int end) { expect(document.activeElement, input);