diff --git a/lib/web_ui/lib/src/engine/browser_detection.dart b/lib/web_ui/lib/src/engine/browser_detection.dart
index 054b16e6be83b1a2b2e921b765d8bd0da4f1c28e..3a4c1a4cbc305b2ecef659db0bd08e64fd851453 100644
--- a/lib/web_ui/lib/src/engine/browser_detection.dart
+++ b/lib/web_ui/lib/src/engine/browser_detection.dart
@@ -29,10 +29,23 @@ enum BrowserEngine {
 /// Lazily initialized current browser engine.
 BrowserEngine _browserEngine;
 
+/// Override the value of [browserEngine].
+///
+/// Setting this to `null` lets [browserEngine] detect the browser that the
+/// app is running on.
+///
+/// This is intended to be used for testing and debugging only.
+BrowserEngine debugBrowserEngineOverride;
+
 /// Returns the [BrowserEngine] used by the current browser.
 ///
 /// This is used to implement browser-specific behavior.
-BrowserEngine get browserEngine => _browserEngine ??= _detectBrowserEngine();
+BrowserEngine get browserEngine {
+  if (debugBrowserEngineOverride != null) {
+    return debugBrowserEngineOverride;
+  }
+  return _browserEngine ??= _detectBrowserEngine();
+}
 
 BrowserEngine _detectBrowserEngine() {
   final String vendor = html.window.navigator.vendor;
diff --git a/lib/web_ui/lib/src/engine/text_editing/input_type.dart b/lib/web_ui/lib/src/engine/text_editing/input_type.dart
index 47c0ff7a099274939d8a837394634a94ceeffaca..d7620c2f625842984f730c23fb02acdcfdfdc8e7 100644
--- a/lib/web_ui/lib/src/engine/text_editing/input_type.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/input_type.dart
@@ -66,7 +66,7 @@ abstract class EngineInputType {
   html.HtmlElement createDomElement() => html.InputElement();
 
   /// Given a [domElement], set attributes that are specific to this input type.
-  void configureDomElement(html.HtmlElement domElement) {
+  void configureInputMode(html.HtmlElement domElement) {
     if (inputmodeAttribute == null) {
       return;
     }
diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index edba66651a583ad7a8e3c2bc0db37ceffb9903bc..9c99621b78d36349eb8ae43cfa9f0fe0c154b4ee 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -12,16 +12,6 @@ const int _kReturnKeyCode = 13;
 
 void _emptyCallback(dynamic _) {}
 
-/// Indicates whether virtual keyboard shifts the location of input element.
-///
-/// Value decided using the operating system and the browser engine.
-///
-/// In iOS, the virtual keyboard might shifts the screen up to make input
-/// visible depending on the location of the focused input element.
-bool get _doesKeyboardShiftInput =>
-    browserEngine == BrowserEngine.webkit &&
-    operatingSystem == OperatingSystem.iOs;
-
 /// These style attributes are constant throughout the life time of an input
 /// element.
 ///
@@ -222,37 +212,78 @@ class InputConfiguration {
 typedef _OnChangeCallback = void Function(EditingState editingState);
 typedef _OnActionCallback = void Function(String inputAction);
 
-/// Wraps the DOM element used to provide text editing capabilities.
+/// Interface defining the template for text editing strategies.
 ///
-/// The backing DOM element could be one of:
+/// The algorithms will be picked in the runtime depending on the concrete
+/// class implementing the interface.
 ///
-/// 1. `<input>`.
-/// 2. `<textarea>`.
-/// 3. `<span contenteditable="true">`.
-class TextEditingElement {
-  /// Creates a non-persistent [TextEditingElement].
+/// These algorithms is expected to differ by operating system and/or browser.
+abstract class TextEditingStrategy {
+  void initializeTextEditing(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  });
+
+  /// Place the DOM element to its initial position.
+  ///
+  /// It will be located exactly in the same place with the editable widgets,
+  /// however it's contents and cursor will be invisible.
   ///
-  /// See [TextEditingElement.persistent] to understand what persistent mode is.
-  TextEditingElement(this.owner);
+  /// Users can interact with the element and use the functionalities of the
+  /// right-click menu. Such as copy,paste, cut, select, translate...
+  void initializeElementPosition();
 
-  /// Timer that times when to set the location of the input text.
+  /// Register event listeners to the DOM element.
   ///
-  /// This is only used for iOS. In iOS, virtual keyboard shifts the screen.
-  /// There is no callback to know if the keyboard is up and how much the screen
-  /// has shifted. Therefore instead of listening to the shift and passing this
-  /// information to Flutter Framework, we are trying to stop the shift.
+  /// These event listener will be removed in [disable].
+  void addEventHandlers();
+
+  /// Update the element's position.
   ///
-  /// In iOS, the virtual keyboard shifts the screen up if the focused input
-  /// element is under the keyboard or very close to the keyboard. Before the
-  /// focus is called we are positioning it offscreen. The location of the input
-  /// in iOS is set to correct place, 100ms after focus. We use this timer for
-  /// timing this delay.
-  Timer _positionInputElementTimer;
-  static const Duration _delayBeforePositioning =
-      const Duration(milliseconds: 100);
+  /// The position will be updated everytime Flutter Framework sends
+  /// 'TextInput.setEditableSizeAndTransform' message.
+  void updateElementPosition(_GeometricInfo geometricInfo);
+
+  /// Set editing state of the element.
+  ///
+  /// This includes text and selection relelated states. The editing state will
+  /// be updated everytime Flutter Framework sends 'TextInput.setEditingState'
+  /// message.
+  void setEditingState(EditingState editingState);
 
+  /// Set style to the native DOM element used for text editing.
+  void updateElementStyle(_EditingStyle style);
+
+  /// Disables the element so it's no longer used for text editing.
+  ///
+  /// Calling [disable] also removes any registered event listeners.
+  void disable();
+}
+
+/// Class implementing the default editing strategies for text editing.
+///
+/// This class uses a DOM element to provide text editing capabilities.
+///
+///  The backing DOM element could be one of:
+///
+/// 1. `<input>`.
+/// 2. `<textarea>`.
+/// 3. `<span contenteditable="true">`.
+///
+/// This class includes all the default behaviour for an editing element as
+/// well as the common properties such as [domElement].
+///
+/// Strategies written for different formfactor's/browser's should extend this
+/// class instead of extending the interface [TextEditingStrategy].
+///
+/// Unless a formfactor/browser requires specific implementation for a specific
+/// strategy the methods in this class should be used.
+class DefaultTextEditingStrategy implements TextEditingStrategy {
   final HybridTextEditing owner;
 
+  DefaultTextEditingStrategy(this.owner);
+
   @visibleForTesting
   bool isEnabled = false;
 
@@ -272,103 +303,66 @@ class TextEditingElement {
   final List<StreamSubscription<html.Event>> _subscriptions =
       <StreamSubscription<html.Event>>[];
 
-  /// Whether or not the input element can be positioned at this point in time.
-  ///
-  /// This is currently only used in iOS. It's set to false before focusing the
-  /// input field, and set back to true after a short timer. We do this because
-  /// if the input field is positioned before focus, it could be pushed to an
-  /// incorrect position by the virtual keyboard.
-  ///
-  /// See:
-  ///
-  /// * [_delayBeforePositioning] which controls how long to wait before
-  ///   positioning the input field.
-  bool _canPosition = true;
-
-  /// Enables the element so it can be used to edit text.
-  ///
-  /// Register [callback] so that it gets invoked whenever any change occurs in
-  /// the text editing element.
-  ///
-  /// Changes could be:
-  /// - Text changes, or
-  /// - Selection changes.
-  void enable(
+  @override
+  void initializeTextEditing(
     InputConfiguration inputConfig, {
     @required _OnChangeCallback onChange,
     @required _OnActionCallback onAction,
   }) {
     assert(!isEnabled);
 
-    _initDomElement(inputConfig);
+    domElement = inputConfig.inputType.createDomElement();
+    if (inputConfig.obscureText) {
+      domElement.setAttribute('type', 'password');
+    }
+
+    final String autocorrectValue = inputConfig.autocorrect ? 'on' : 'off';
+    domElement.setAttribute('autocorrect', autocorrectValue);
+
+    _setStaticStyleAttributes(domElement);
+    _style?.applyToDomElement(domElement);
+    initializeElementPosition();
+    domRenderer.glassPaneElement.append(domElement);
+
     isEnabled = true;
     _inputConfiguration = inputConfig;
     _onChange = onChange;
     _onAction = onAction;
+  }
 
-    // Chrome on Android will hide the onscreen keyboard when you tap outside
-    // the text box. Instead, we want the framework to tell us to hide the
-    // keyboard via `TextInput.clearClient` or `TextInput.hide`.
-    //
-    // Safari on iOS does not hide the keyboard as a side-effect of tapping
-    // outside the editable box. Instead it provides an explicit "done" button,
-    // which is reported as "blur", so we must not reacquire focus when we see
-    // a "blur" event and let the keyboard disappear.
-    if (browserEngine == BrowserEngine.blink ||
-        browserEngine == BrowserEngine.unknown) {
-      _subscriptions.add(domElement.onBlur.listen((_) {
-        if (isEnabled) {
-          _refocus();
-        }
-      }));
-    }
-
-    if (_doesKeyboardShiftInput) {
-      _preventShiftDuringFocus();
-    }
-    domElement.focus();
-
-    if (_lastEditingState != null) {
-      setEditingState(_lastEditingState);
-    }
+  @override
+  void initializeElementPosition() {
+    positionElement();
+  }
 
+  @override
+  void addEventHandlers() {
     // Subscribe to text and selection changes.
     _subscriptions.add(domElement.onInput.listen(_handleChange));
 
     _subscriptions.add(domElement.onKeyDown.listen(_maybeSendAction));
 
-    /// Detects changes in text selection.
-    ///
-    /// Currently only used in Firefox.
-    ///
-    /// In Firefox, when cursor moves, neither selectionChange nor onInput
-    /// events are triggered. We are listening to keyup event. Selection start,
-    /// end values are used to decide if the text cursor moved.
-    ///
-    /// Specific keycodes are not checked since users/applications can bind
-    /// their own keys to move the text cursor.
-    /// Decides if the selection has changed (cursor moved) compared to the
-    /// previous values.
-    ///
-    /// After each keyup, the start/end values of the selection is compared to the
-    /// previously saved editing state.
-    if (browserEngine == BrowserEngine.firefox) {
-      _subscriptions.add(domElement.onKeyUp.listen((event) {
-        _handleChange(event);
-      }));
+    _subscriptions.add(html.document.onSelectionChange.listen(_handleChange));
+  }
 
-      /// In Firefox the context menu item "Select All" does not work without
-      /// listening to onSelect. On the other browsers onSelectionChange is
-      /// enough for covering "Select All" functionality.
-      _subscriptions.add(domElement.onSelect.listen(_handleChange));
-    } else {
-      _subscriptions.add(html.document.onSelectionChange.listen(_handleChange));
+  @override
+  void updateElementPosition(_GeometricInfo geometricInfo) {
+    _geometricInfo = geometricInfo;
+    if (isEnabled) {
+      positionElement();
     }
   }
 
-  /// Disables the element so it's no longer used for text editing.
-  ///
-  /// Calling [disable] also removes any registered event listeners.
+  @mustCallSuper
+  @override
+  void updateElementStyle(_EditingStyle style) {
+    _style = style;
+    if (isEnabled) {
+      _style.applyToDomElement(domElement);
+    }
+  }
+
+  @override
   void disable() {
     assert(isEnabled);
 
@@ -381,67 +375,146 @@ class TextEditingElement {
       _subscriptions[i].cancel();
     }
     _subscriptions.clear();
-    _positionInputElementTimer?.cancel();
-    _positionInputElementTimer = null;
-    _removeDomElement();
+    domElement.remove();
+    domElement = null;
   }
 
-  void _initDomElement(InputConfiguration inputConfig) {
-    domElement = inputConfig.inputType.createDomElement();
-    inputConfig.inputType.configureDomElement(domElement);
-    if (inputConfig.obscureText) {
-      domElement.setAttribute('type', 'password');
+  @mustCallSuper
+  @override
+  void setEditingState(EditingState editingState) {
+    _lastEditingState = editingState;
+    if (!isEnabled || !editingState.isValid) {
+      return;
     }
+    _lastEditingState.applyToDomElement(domElement);
+  }
 
-    final String autocorrectValue = inputConfig.autocorrect ? 'on' : 'off';
-    domElement.setAttribute('autocorrect', autocorrectValue);
+  void positionElement() {
+    _geometricInfo?.applyToDomElement(domElement);
+    domElement.focus();
+  }
 
-    _setStaticStyleAttributes(domElement);
-    applyAllStyles();
-    domRenderer.glassPaneElement.append(domElement);
+  void _handleChange(html.Event event) {
+    assert(isEnabled);
+    assert(domElement != null);
+
+    EditingState newEditingState = EditingState.fromDomElement(domElement);
+
+    assert(newEditingState != null);
+
+    if (newEditingState != _lastEditingState) {
+      _lastEditingState = newEditingState;
+      _onChange(_lastEditingState);
+    }
   }
 
-  void _removeDomElement() {
-    domElement.remove();
-    domElement = null;
+  void _maybeSendAction(html.KeyboardEvent event) {
+    if (_inputConfiguration.inputType.submitActionOnEnter &&
+        event.keyCode == _kReturnKeyCode) {
+      event.preventDefault();
+      _onAction(_inputConfiguration.inputAction);
+    }
   }
 
-  void _refocus() {
+  /// Enables the element so it can be used to edit text.
+  ///
+  /// Register [callback] so that it gets invoked whenever any change occurs in
+  /// the text editing element.
+  ///
+  /// Changes could be:
+  /// - Text changes, or
+  /// - Selection changes.
+  void enable(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    assert(!isEnabled);
+
+    initializeTextEditing(inputConfig, onChange: onChange, onAction: onAction);
+
+    addEventHandlers();
+
+    if (_lastEditingState != null) {
+      setEditingState(this._lastEditingState);
+    }
+
+    // Re-focuses after setting editing state.
     domElement.focus();
   }
+}
 
-  /// Set style to the native DOM element used for text editing.
+/// IOS/Safari behaviour for text editing.
+///
+/// In iOS, the virtual keyboard might shifts the screen up to make input
+/// visible depending on the location of the focused input element.
+///
+/// Due to this [initializeElementPosition] and [updateElementPosition]
+/// strategies are different.
+///
+/// [disable] is also different since the [_positionInputElementTimer]
+/// also needs to be cleaned.
+///
+/// inputmodeAttribute needs to be set for mobile devices. Due to this
+/// [initializeTextEditing] is different.
+class IOSTextEditingStrategy extends DefaultTextEditingStrategy {
+  IOSTextEditingStrategy(HybridTextEditing owner) : super(owner);
+
+  /// Timer that times when to set the location of the input text.
   ///
-  /// It will be located exactly in the same place with the editable widgets,
-  /// however it's contents and cursor will be invisible.
+  /// This is only used for iOS. In iOS, virtual keyboard shifts the screen.
+  /// There is no callback to know if the keyboard is up and how much the screen
+  /// has shifted. Therefore instead of listening to the shift and passing this
+  /// information to Flutter Framework, we are trying to stop the shift.
   ///
-  /// Users can interact with the element and use the functionalities of the
-  /// right-click menu. Such as copy,paste, cut, select, translate...
-  void applyAllStyles() {
-    _style?.applyToDomElement(domElement);
-    _positionElement();
-  }
+  /// In iOS, the virtual keyboard shifts the screen up if the focused input
+  /// element is under the keyboard or very close to the keyboard. Before the
+  /// focus is called we are positioning it offscreen. The location of the input
+  /// in iOS is set to correct place, 100ms after focus. We use this timer for
+  /// timing this delay.
+  Timer _positionInputElementTimer;
+  static const Duration _delayBeforePositioning =
+      const Duration(milliseconds: 100);
 
-  void _positionElement() {
-    if (_canPosition && _geometricInfo != null) {
-      _geometricInfo.applyToDomElement(domElement);
-    }
+  /// Whether or not the input element can be positioned at this point in time.
+  ///
+  /// This is currently only used in iOS. It's set to false before focusing the
+  /// input field, and set back to true after a short timer. We do this because
+  /// if the input field is positioned before focus, it could be pushed to an
+  /// incorrect position by the virtual keyboard.
+  ///
+  /// See:
+  ///
+  /// * [_delayBeforePositioning] which controls how long to wait before
+  ///   positioning the input field.
+  bool _canPosition = true;
+
+  @override
+  void initializeTextEditing(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    super.initializeTextEditing(inputConfig,
+        onChange: onChange, onAction: onAction);
+    inputConfig.inputType.configureInputMode(domElement);
   }
 
-  void _preventShiftDuringFocus() {
-    // Position the element outside of the page before focusing on it.
-    //
-    // See [_positionInputElementTimer].
-    owner.setStyleOutsideOfScreen(domElement);
+  @override
+  void initializeElementPosition() {
+    /// Position the element outside of the page before focusing on it. This is
+    /// useful for not triggering a scroll when iOS virtual keyboard is
+    /// coming up.
+    domElement.style.transform = 'translate(-9999px, -9999px)';
+
     _canPosition = false;
 
-    // TODO(mdebbar): Should we remove this listener after the first invocation?
     _subscriptions.add(domElement.onFocus.listen((_) {
       // Cancel previous timer if exists.
       _positionInputElementTimer?.cancel();
       _positionInputElementTimer = Timer(_delayBeforePositioning, () {
         _canPosition = true;
-        _positionElement();
+        positionElement();
       });
 
       // When the virtual keyboard is closed on iOS, onBlur is triggered.
@@ -455,69 +528,109 @@ class TextEditingElement {
     }));
   }
 
-  void setEditingState(EditingState editingState) {
-    _lastEditingState = editingState;
-    if (!isEnabled || !editingState.isValid) {
-      return;
+  @override
+  void updateElementPosition(_GeometricInfo geometricInfo) {
+    _geometricInfo = geometricInfo;
+    if (isEnabled && _canPosition) {
+      positionElement();
     }
+  }
 
-    _lastEditingState.applyToDomElement(domElement);
-
-    // Re-focuses when setting editing state.
-    domElement.focus();
+  @override
+  void disable() {
+    super.disable();
+    _positionInputElementTimer?.cancel();
+    _positionInputElementTimer = null;
   }
+}
 
-  void setGeometricInfo(_GeometricInfo geometricInfo) {
-    _geometricInfo = geometricInfo;
-    if (isEnabled) {
-      _positionElement();
-    }
+/// Android behaviour for text editing.
+///
+/// inputmodeAttribute needs to be set for mobile devices. Due to this
+/// [initializeTextEditing] is different.
+///
+/// Keyboard acts differently than other devices. [addEventHandlers] handles
+/// this case as an extra.
+class AndroidTextEditingStrategy extends DefaultTextEditingStrategy {
+  AndroidTextEditingStrategy(HybridTextEditing owner) : super(owner);
+
+  @override
+  void initializeTextEditing(
+    InputConfiguration inputConfig, {
+    @required _OnChangeCallback onChange,
+    @required _OnActionCallback onAction,
+  }) {
+    super.initializeTextEditing(inputConfig,
+        onChange: onChange, onAction: onAction);
+    inputConfig.inputType.configureInputMode(domElement);
   }
 
-  void setStyle(_EditingStyle style) {
-    _style = style;
-    if (isEnabled) {
-      _style.applyToDomElement(domElement);
+  @override
+  void addEventHandlers() {
+    super.addEventHandlers();
+    // Chrome on Android will hide the onscreen keyboard when you tap outside
+    // the text box. Instead, we want the framework to tell us to hide the
+    // keyboard via `TextInput.clearClient` or `TextInput.hide`.
+    if (browserEngine == BrowserEngine.blink ||
+        browserEngine == BrowserEngine.unknown) {
+      _subscriptions.add(domElement.onBlur.listen((_) {
+        if (isEnabled) {
+          // Refocus.
+          domElement.focus();
+        }
+      }));
     }
   }
+}
 
-  void _handleChange(html.Event event) {
-    assert(isEnabled);
-    assert(domElement != null);
+/// Firefox behaviour for text editing.
+///
+/// Selections are different in Firefox. [addEventHandlers] strategy is
+/// impelemented diefferently in Firefox.
+class FirefoxTextEditingStrategy extends DefaultTextEditingStrategy {
+  FirefoxTextEditingStrategy(HybridTextEditing owner) : super(owner);
 
-    EditingState newEditingState = EditingState.fromDomElement(domElement);
+  @override
+  void addEventHandlers() {
+    // Subscribe to text and selection changes.
+    _subscriptions.add(domElement.onInput.listen(_handleChange));
 
-    assert(newEditingState != null);
+    _subscriptions.add(domElement.onKeyDown.listen(_maybeSendAction));
 
-    if (newEditingState != _lastEditingState) {
-      _lastEditingState = newEditingState;
-      _onChange(_lastEditingState);
-    }
-  }
+    /// Detects changes in text selection.
+    ///
+    /// In Firefox, when cursor moves, neither selectionChange nor onInput
+    /// events are triggered. We are listening to keyup event. Selection start,
+    /// end values are used to decide if the text cursor moved.
+    ///
+    /// Specific keycodes are not checked since users/applications can bind
+    /// their own keys to move the text cursor.
+    /// Decides if the selection has changed (cursor moved) compared to the
+    /// previous values.
+    ///
+    /// After each keyup, the start/end values of the selection is compared to
+    /// the previously saved editing state.
+    _subscriptions.add(domElement.onKeyUp.listen((event) {
+      _handleChange(event);
+    }));
 
-  void _maybeSendAction(html.KeyboardEvent event) {
-    if (_inputConfiguration.inputType.submitActionOnEnter &&
-        event.keyCode == _kReturnKeyCode) {
-      event.preventDefault();
-      _onAction(_inputConfiguration.inputAction);
-    }
+    /// In Firefox the context menu item "Select All" does not work without
+    /// listening to onSelect. On the other browsers onSelectionChange is
+    /// enough for covering "Select All" functionality.
+    _subscriptions.add(domElement.onSelect.listen(_handleChange));
   }
 }
 
-/// The implementation of a persistent mode for [TextEditingElement].
+/// Text editing used by accesibilty mode.
 ///
-/// Persistent mode assumes the caller will own the creation, insertion and
-/// disposal of the DOM element.
+/// [PersistentTextEditingElement] assumes the caller will own the creation,
+/// insertion and disposal of the DOM element. Due to this
+/// [initializeElementPosition], [initializeTextEditing] and
+/// [disable] strategies are handled differently.
 ///
 /// This class is still responsible for hooking up the DOM element with the
 /// [HybridTextEditing] instance so that changes are communicated to Flutter.
-///
-/// Persistent mode is useful for callers that want to have full control over
-/// the placement and lifecycle of the DOM element. An example of such a caller
-/// is Semantic's TextField that needs to put the DOM element inside the
-/// semantic tree. It also requires that the DOM element remains in the tree
-/// when the user isn't editing.
-class PersistentTextEditingElement extends TextEditingElement {
+class PersistentTextEditingElement extends DefaultTextEditingStrategy {
   /// Creates a [PersistentTextEditingElement] that eagerly instantiates
   /// [domElement] so the caller can insert it before calling
   /// [PersistentTextEditingElement.enable].
@@ -528,21 +641,13 @@ class PersistentTextEditingElement extends TextEditingElement {
     // TODO(yjbanov): move into initializer list when https://github.com/dart-lang/sdk/issues/37881 is fixed.
     assert((domElement is html.InputElement) ||
         (domElement is html.TextAreaElement));
-    this.domElement = domElement;
-  }
-
-  @override
-  void _initDomElement(InputConfiguration inputConfig) {
-    // In persistent mode, the user of this class is supposed to insert the
-    // [domElement] on their own. Let's make sure they did.
-    assert(domElement != null);
-    assert(html.document.body.contains(domElement));
+    super.domElement = domElement;
   }
 
   @override
-  void _removeDomElement() {
-    // In persistent mode, we don't want to remove the DOM element because the
-    // caller is responsible for that.
+  void disable() {
+    // We don't want to remove the DOM element because the caller is responsible
+    // for that.
     //
     // Remove focus from the editable element to cause the keyboard to hide.
     // Otherwise, the keyboard stays on screen even when the user navigates to
@@ -551,12 +656,34 @@ class PersistentTextEditingElement extends TextEditingElement {
   }
 
   @override
-  void _refocus() {
-    // The semantic text field on Android listens to the focus event in order to
-    // switch to a new text field. If we refocus here, we break that
-    // functionality and the user can't switch from one text field to another in
-    // accessibility mode.
+  void initializeElementPosition() {
+    // No-op
+  }
+
+  @override
+  void initializeTextEditing(InputConfiguration inputConfig,
+      {_OnChangeCallback onChange, _OnActionCallback onAction}) {
+    // In accesibilty mode, the user of this class is supposed to insert the
+    // [domElement] on their own. Let's make sure they did.
+    assert(domElement != null);
+    assert(html.document.body.contains(domElement));
+
+    isEnabled = true;
+    _inputConfiguration = inputConfig;
+    _onChange = onChange;
+    _onAction = onAction;
+
+    domElement.focus();
+  }
+
+  @override
+  void setEditingState(EditingState editingState) {
+    super.setEditingState(editingState);
+
+    // Refocus after setting editing state.
+    domElement.focus();
   }
+
 }
 
 /// Text editing singleton.
@@ -571,22 +698,38 @@ final HybridTextEditing textEditing = HybridTextEditing();
 /// - HTML's contentEditable feature handles typing and text changes.
 /// - HTML's selection API handles selection changes and cursor movements.
 class HybridTextEditing {
-  /// The default HTML element used to manage editing state when a custom
-  /// element is not provided via [useCustomEditableElement].
-  TextEditingElement _defaultEditingElement;
+  /// The text editing stategy used. It can change depending on the
+  /// formfactor/browser.
+  ///
+  /// It uses an HTML element to manage editing state when a custom element is
+  /// not provided via [useCustomEditableElement]
+  DefaultTextEditingStrategy _defaultEditingElement;
 
   /// Private constructor so this class can be a singleton.
+  ///
+  /// The constructor also decides which text editing strategy to use depending
+  /// on the operating system and browser engine.
   HybridTextEditing() {
-    _defaultEditingElement = TextEditingElement(this);
+    if (browserEngine == BrowserEngine.webkit &&
+        operatingSystem == OperatingSystem.iOs) {
+      this._defaultEditingElement = IOSTextEditingStrategy(this);
+    } else if (browserEngine == BrowserEngine.blink &&
+        operatingSystem == OperatingSystem.android) {
+      this._defaultEditingElement = AndroidTextEditingStrategy(this);
+    } else if (browserEngine == BrowserEngine.firefox) {
+      this._defaultEditingElement = FirefoxTextEditingStrategy(this);
+    } else {
+      this._defaultEditingElement = DefaultTextEditingStrategy(this);
+    }
   }
 
   /// The HTML element used to manage editing state.
   ///
   /// This field is populated using [useCustomEditableElement]. If `null` the
-  /// [_defaultEditableElement] is used instead.
-  TextEditingElement _customEditingElement;
+  /// [_defaultEditingElement] is used instead.
+  DefaultTextEditingStrategy _customEditingElement;
 
-  TextEditingElement get editingElement {
+  DefaultTextEditingStrategy get editingElement {
     if (_customEditingElement != null) {
       return _customEditingElement;
     }
@@ -605,7 +748,8 @@ class HybridTextEditing {
   /// instead of the hidden default element.
   ///
   /// Use [stopUsingCustomEditableElement] to switch back to default element.
-  void useCustomEditableElement(TextEditingElement customEditingElement) {
+  void useCustomEditableElement(
+      DefaultTextEditingStrategy customEditingElement) {
     if (isEditing && customEditingElement != _customEditingElement) {
       stopEditing();
     }
@@ -655,11 +799,12 @@ class HybridTextEditing {
 
       case 'TextInput.setEditableSizeAndTransform':
         editingElement
-            .setGeometricInfo(_GeometricInfo.fromFlutter(call.arguments));
+            .updateElementPosition(_GeometricInfo.fromFlutter(call.arguments));
         break;
 
       case 'TextInput.setStyle':
-        editingElement.setStyle(_EditingStyle.fromFlutter(call.arguments));
+        editingElement
+            .updateElementStyle(_EditingStyle.fromFlutter(call.arguments));
         break;
 
       case 'TextInput.clearClient':
@@ -712,19 +857,6 @@ class HybridTextEditing {
       _emptyCallback,
     );
   }
-
-  // TODO(flutter_web): After the browser closes and re-opens the virtual
-  // shifts the page in iOS. Call this method from visibility change listener
-  // attached to body.
-  /// Set the DOM element's location somewhere outside of the screen.
-  ///
-  /// This is useful for not triggering a scroll when iOS virtual keyboard is
-  /// coming up.
-  ///
-  /// See [TextEditingElement._delayBeforePositioning].
-  void setStyleOutsideOfScreen(html.HtmlElement domElement) {
-    domElement.style.transform = 'translate(-9999px, -9999px)';
-  }
 }
 
 /// Information on the font and alignment of a text editing element.
diff --git a/lib/web_ui/test/text_editing_test.dart b/lib/web_ui/test/text_editing_test.dart
index 621747353486be1c7898599f5a256c1393684206..125e80f777970de1bfdcb4e89a221114668d0031 100644
--- a/lib/web_ui/test/text_editing_test.dart
+++ b/lib/web_ui/test/text_editing_test.dart
@@ -18,7 +18,10 @@ const int _kReturnKeyCode = 13;
 
 const MethodCodec codec = JSONMethodCodec();
 
-TextEditingElement editingElement;
+/// Add unit tests for [FirefoxTextEditingStrategy].
+/// TODO(nurhan): https://github.com/flutter/flutter/issues/46891
+
+DefaultTextEditingStrategy editingElement;
 EditingState lastEditingState;
 String lastInputAction;
 
@@ -54,16 +57,13 @@ void main() {
     lastInputAction = null;
   });
 
-  group('$TextEditingElement', () {
+  group('$DefaultTextEditingStrategy', () {
     setUp(() {
-      editingElement = TextEditingElement(HybridTextEditing());
+      editingElement = DefaultTextEditingStrategy(HybridTextEditing());
     });
 
     tearDown(() {
-      if (editingElement.isEnabled) {
-        // Clean up all the DOM elements and event listeners.
-        editingElement.disable();
-      }
+      cleanTextEditingElement();
     });
 
     test('Creates element when enabled and removes it when disabled', () {
@@ -204,23 +204,6 @@ void main() {
       expect(lastInputAction, isNull);
     });
 
-    test('Re-acquires focus', () async {
-      editingElement.enable(
-        singlelineConfig,
-        onChange: trackEditingState,
-        onAction: trackInputAction,
-      );
-      expect(document.activeElement, editingElement.domElement);
-
-      editingElement.domElement.blur();
-      // The focus remains on [editingElement.domElement].
-      expect(document.activeElement, editingElement.domElement);
-
-      // There should be no input action.
-      expect(lastInputAction, isNull);
-    }, // TODO(nurhan): https://github.com/flutter/flutter/issues/46638
-        skip: (browserEngine == BrowserEngine.firefox));
-
     test('Multi-line mode also works', () {
       // The textarea element is created lazily.
       expect(document.getElementsByTagName('textarea'), hasLength(0));
@@ -252,10 +235,6 @@ void main() {
           EditingState(text: 'bar\nbaz', baseOffset: 2, extentOffset: 7));
       checkTextAreaEditingState(textarea, 'bar\nbaz', 2, 7);
 
-      // Re-acquires focus.
-      textarea.blur();
-      expect(document.activeElement, textarea);
-
       editingElement.disable();
       // The textarea should be cleaned up.
       expect(document.getElementsByTagName('textarea'), hasLength(0));
@@ -355,145 +334,150 @@ void main() {
       // And default behavior of keyboard event shouldn't have been prevented.
       expect(event.defaultPrevented, isFalse);
     });
+  });
 
-    group('[persistent mode]', () {
-      test('Does not accept dom elements of a wrong type', () {
-        // A regular <span> shouldn't be accepted.
-        final HtmlElement span = SpanElement();
-        expect(
-          () => PersistentTextEditingElement(HybridTextEditing(), span),
-          throwsAssertionError,
-        );
-      });
+  group('$PersistentTextEditingElement', () {
+    InputElement testInputElement;
 
-      test('Does not re-acquire focus', () {
-        // See [PersistentTextEditingElement._refocus] for an explanation of why
-        // re-acquiring focus shouldn't happen in persistent mode.
-        final InputElement input = InputElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), input);
-        expect(document.activeElement, document.body);
+    setUp(() {
+      testInputElement = InputElement();
+    });
 
-        document.body.append(input);
-        persistentEditingElement.enable(
-          singlelineConfig,
-          onChange: trackEditingState,
-          onAction: trackInputAction,
-        );
-        expect(document.activeElement, input);
+    tearDown(() {
+      cleanTextEditingElement();
+      testInputElement = null;
+    });
 
-        // The input should lose focus now.
-        persistentEditingElement.domElement.blur();
-        expect(document.activeElement, document.body);
+    test('Does not accept dom elements of a wrong type', () {
+      // A regular <span> shouldn't be accepted.
+      final HtmlElement span = SpanElement();
+      expect(
+        () => PersistentTextEditingElement(HybridTextEditing(), span),
+        throwsAssertionError,
+      );
+    });
 
-        persistentEditingElement.disable();
-      });
+    test('Does not re-acquire focus', () {
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), testInputElement);
 
-      test('Does not dispose and recreate dom elements in persistent mode', () {
-        final InputElement input = InputElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), input);
+      expect(document.activeElement, document.body);
 
-        // The DOM element should've been eagerly created.
-        expect(input, isNotNull);
-        // But doesn't have focus.
-        expect(document.activeElement, document.body);
+      document.body.append(testInputElement);
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      expect(document.activeElement, testInputElement);
 
-        // Can't enable before the input element is inserted into the DOM.
-        expect(
-          () => persistentEditingElement.enable(
-            singlelineConfig,
-            onChange: trackEditingState,
-            onAction: trackInputAction,
-          ),
-          throwsAssertionError,
-        );
+      // The input should lose focus now.
+      editingElement.domElement.blur();
+      expect(document.activeElement, document.body);
 
-        document.body.append(input);
-        persistentEditingElement.enable(
-          singlelineConfig,
-          onChange: trackEditingState,
-          onAction: trackInputAction,
-        );
-        expect(document.activeElement, persistentEditingElement.domElement);
-        // It doesn't create a new DOM element.
-        expect(persistentEditingElement.domElement, input);
-
-        persistentEditingElement.disable();
-        // It doesn't remove the DOM element.
-        expect(persistentEditingElement.domElement, input);
-        expect(document.body.contains(persistentEditingElement.domElement),
-            isTrue);
-        // But the DOM element loses focus.
-        expect(document.activeElement, document.body);
-      });
+      editingElement.disable();
+    });
 
-      test('Refocuses when setting editing state', () {
-        final InputElement input = InputElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), input);
+    test('Does not dispose and recreate dom elements in persistent mode', () {
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), testInputElement);
 
-        document.body.append(input);
-        persistentEditingElement.enable(
+      // The DOM element should've been eagerly created.
+      expect(testInputElement, isNotNull);
+      // But doesn't have focus.
+      expect(document.activeElement, document.body);
+
+      // Can't enable before the input element is inserted into the DOM.
+      expect(
+        () => editingElement.enable(
           singlelineConfig,
           onChange: trackEditingState,
           onAction: trackInputAction,
-        );
-        expect(document.activeElement, input);
+        ),
+        throwsAssertionError,
+      );
 
-        persistentEditingElement.domElement.blur();
-        expect(document.activeElement, document.body);
+      document.body.append(testInputElement);
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      expect(document.activeElement, editingElement.domElement);
+      // It doesn't create a new DOM element.
+      expect(editingElement.domElement, testInputElement);
+
+      editingElement.disable();
+      // It doesn't remove the DOM element.
+      expect(editingElement.domElement, testInputElement);
+      expect(document.body.contains(editingElement.domElement), isTrue);
+      // But the DOM element loses focus.
+      expect(document.activeElement, document.body);
+    });
 
-        // The input should regain focus now.
-        persistentEditingElement.setEditingState(EditingState(text: 'foo'));
-        expect(document.activeElement, input);
+    test('Refocuses when setting editing state', () {
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), testInputElement);
 
-        persistentEditingElement.disable();
-      });
+      document.body.append(testInputElement);
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      expect(document.activeElement, testInputElement);
 
-      test('Works in multi-line mode', () {
-        final TextAreaElement textarea = TextAreaElement();
-        final PersistentTextEditingElement persistentEditingElement =
-            PersistentTextEditingElement(HybridTextEditing(), textarea);
+      editingElement.domElement.blur();
+      expect(document.activeElement, document.body);
 
-        expect(persistentEditingElement.domElement, textarea);
-        expect(document.activeElement, document.body);
+      // The input should regain focus now.
+      editingElement.setEditingState(EditingState(text: 'foo'));
+      expect(document.activeElement, testInputElement);
 
-        // Can't enable before the textarea is inserted into the DOM.
-        expect(
-          () => persistentEditingElement.enable(
-            singlelineConfig,
-            onChange: trackEditingState,
-            onAction: trackInputAction,
-          ),
-          throwsAssertionError,
-        );
+      editingElement.disable();
+    });
 
-        document.body.append(textarea);
-        persistentEditingElement.enable(
-          multilineConfig,
+    test('Works in multi-line mode', () {
+      final TextAreaElement textarea = TextAreaElement();
+      editingElement =
+          PersistentTextEditingElement(HybridTextEditing(), textarea);
+
+      expect(editingElement.domElement, textarea);
+      expect(document.activeElement, document.body);
+
+      // Can't enable before the textarea is inserted into the DOM.
+      expect(
+        () => editingElement.enable(
+          singlelineConfig,
           onChange: trackEditingState,
           onAction: trackInputAction,
-        );
-        // Focuses the textarea.
-        expect(document.activeElement, textarea);
-
-        // Doesn't re-acquire focus.
-        textarea.blur();
-        expect(document.activeElement, document.body);
-
-        // Re-focuses when setting editing state
-        persistentEditingElement.setEditingState(EditingState(text: 'foo'));
-        expect(document.activeElement, textarea);
-
-        persistentEditingElement.disable();
-        // It doesn't remove the textarea from the DOM.
-        expect(persistentEditingElement.domElement, textarea);
-        expect(document.body.contains(persistentEditingElement.domElement),
-            isTrue);
-        // But the textarea loses focus.
-        expect(document.activeElement, document.body);
-      });
+        ),
+        throwsAssertionError,
+      );
+
+      document.body.append(textarea);
+      editingElement.enable(
+        multilineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+      // Focuses the textarea.
+      expect(document.activeElement, textarea);
+
+      // Doesn't re-acquire focus.
+      textarea.blur();
+      expect(document.activeElement, document.body);
+
+      // Re-focuses when setting editing state
+      editingElement.setEditingState(EditingState(text: 'foo'));
+      expect(document.activeElement, textarea);
+
+      editingElement.disable();
+      // It doesn't remove the textarea from the DOM.
+      expect(editingElement.domElement, textarea);
+      expect(document.body.contains(editingElement.domElement), isTrue);
+      // But the textarea loses focus.
+      expect(document.activeElement, document.body);
     });
   });
 
@@ -542,6 +526,8 @@ void main() {
 
     tearDown(() {
       spy.deactivate();
+      debugBrowserEngineOverride = null;
+      debugOperatingSystemOverride = null;
       if (textEditing.isEditing) {
         textEditing.stopEditing();
       }
@@ -990,6 +976,10 @@ void main() {
     test('sets correct input type in Android', () {
       debugOperatingSystemOverride = OperatingSystem.android;
 
+      /// During initialization [HybridTextEditing] will pick the correct
+      /// text editing strategy for [OperatingSystem.android].
+      textEditing = HybridTextEditing();
+
       showKeyboard(inputType: 'text');
       expect(getEditingInputMode(), 'text');
 
@@ -1008,10 +998,17 @@ void main() {
       hideKeyboard();
 
       debugOperatingSystemOverride = null;
-    });
+    },
+        // TODO(nurhan): https://github.com/flutter/flutter/issues/46638
+        skip: (browserEngine == BrowserEngine.firefox));
 
     test('sets correct input type in iOS', () {
       debugOperatingSystemOverride = OperatingSystem.iOs;
+      debugBrowserEngineOverride = BrowserEngine.webkit;
+
+      /// During initialization [HybridTextEditing] will pick the correct
+      /// text editing strategy for [OperatingSystem.iOs].
+      textEditing = HybridTextEditing();
 
       showKeyboard(inputType: 'text');
       expect(getEditingInputMode(), 'text');
@@ -1031,7 +1028,9 @@ void main() {
       hideKeyboard();
 
       debugOperatingSystemOverride = null;
-    });
+    },
+        // TODO(nurhan): https://github.com/flutter/flutter/issues/46638
+        skip: (browserEngine == BrowserEngine.firefox));
 
     test('sends the correct input action as a platform message', () {
       final int clientId = showKeyboard(
@@ -1079,6 +1078,19 @@ void main() {
   group('EditingState', () {
     EditingState _editingState;
 
+    setUp(() {
+      editingElement = DefaultTextEditingStrategy(HybridTextEditing());
+      editingElement.enable(
+        singlelineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+    });
+
+    tearDown(() {
+      cleanTextEditingElement();
+    });
+
     test('Configure input element from the editing state', () {
       final InputElement input = document.getElementsByTagName('input')[0];
       _editingState =
@@ -1092,6 +1104,13 @@ void main() {
     });
 
     test('Configure text area element from the editing state', () {
+      cleanTextEditingElement();
+      editingElement.enable(
+        multilineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+
       final TextAreaElement textArea =
           document.getElementsByTagName('textarea')[0];
       _editingState =
@@ -1118,6 +1137,13 @@ void main() {
     });
 
     test('Get Editing State from text area element', () {
+      cleanTextEditingElement();
+      editingElement.enable(
+        multilineConfig,
+        onChange: trackEditingState,
+        onAction: trackInputAction,
+      );
+
       final TextAreaElement input =
           document.getElementsByTagName('textarea')[0];
       input.value = 'Test';
@@ -1190,6 +1216,15 @@ MethodCall configureSetSizeAndTransformMethodCall(
   });
 }
 
+/// Will disable editing element which will also clean the backup DOM
+/// element from the page.
+void cleanTextEditingElement() {
+  if (editingElement.isEnabled) {
+    // Clean up all the DOM elements and event listeners.
+    editingElement.disable();
+  }
+}
+
 void checkInputEditingState(
     InputElement input, String text, int start, int end) {
   expect(document.activeElement, input);