Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

64 files changed, 5732 insertions, 0 deletions

diff --git a/dom/l10n/DOMLocalization.cpp b/dom/l10n/DOMLocalization.cpp
new file mode 100644
index 0000000000..b4fcf149c6
--- /dev/null
+++ b/dom/l10n/DOMLocalization.cpp
@@ -0,0 +1,700 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "js/ForOfIterator.h"  // JS::ForOfIterator
+#include "json/json.h"
+#include "nsContentUtils.h"
+#include "nsIScriptError.h"
+#include "DOMLocalization.h"
+#include "mozilla/intl/L10nRegistry.h"
+#include "mozilla/intl/LocaleService.h"
+#include "mozilla/dom/AutoEntryScript.h"
+#include "mozilla/dom/Element.h"
+#include "mozilla/dom/L10nOverlays.h"
+
+using namespace mozilla;
+using namespace mozilla::dom;
+using namespace mozilla::intl;
+
+NS_IMPL_CYCLE_COLLECTION_CLASS(DOMLocalization)
+NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN_INHERITED(DOMLocalization, Localization)
+  tmp->DisconnectMutations();
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mMutations)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mRoots)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK_PRESERVED_WRAPPER
+NS_IMPL_CYCLE_COLLECTION_UNLINK_END
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN_INHERITED(DOMLocalization, Localization)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mMutations)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mRoots)
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_END
+
+NS_IMPL_ADDREF_INHERITED(DOMLocalization, Localization)
+NS_IMPL_RELEASE_INHERITED(DOMLocalization, Localization)
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(DOMLocalization)
+NS_INTERFACE_MAP_END_INHERITING(Localization)
+
+DOMLocalization::DOMLocalization(nsIGlobalObject* aGlobal, bool aSync)
+    : Localization(aGlobal, aSync) {
+  mMutations = new L10nMutations(this);
+}
+
+DOMLocalization::DOMLocalization(nsIGlobalObject* aGlobal, bool aIsSync,
+                                 const ffi::LocalizationRc* aRaw)
+    : Localization(aGlobal, aIsSync, aRaw) {
+  mMutations = new L10nMutations(this);
+}
+
+already_AddRefed<DOMLocalization> DOMLocalization::Constructor(
+    const GlobalObject& aGlobal,
+    const Sequence<dom::OwningUTF8StringOrResourceId>& aResourceIds,
+    bool aIsSync, const Optional<NonNull<L10nRegistry>>& aRegistry,
+    const Optional<Sequence<nsCString>>& aLocales, ErrorResult& aRv) {
+  auto ffiResourceIds{L10nRegistry::ResourceIdsToFFI(aResourceIds)};
+  Maybe<nsTArray<nsCString>> locales;
+
+  if (aLocales.WasPassed()) {
+    locales.emplace();
+    locales->SetCapacity(aLocales.Value().Length());
+    for (const auto& locale : aLocales.Value()) {
+      locales->AppendElement(locale);
+    }
+  }
+
+  RefPtr<const ffi::LocalizationRc> raw;
+  bool result;
+
+  if (aRegistry.WasPassed()) {
+    result = ffi::localization_new_with_locales(
+        &ffiResourceIds, aIsSync, aRegistry.Value().Raw(),
+        locales.ptrOr(nullptr), getter_AddRefs(raw));
+  } else {
+    result = ffi::localization_new_with_locales(&ffiResourceIds, aIsSync,
+                                                nullptr, locales.ptrOr(nullptr),
+                                                getter_AddRefs(raw));
+  }
+
+  if (result) {
+    nsCOMPtr<nsIGlobalObject> global =
+        do_QueryInterface(aGlobal.GetAsSupports());
+
+    return do_AddRef(new DOMLocalization(global, aIsSync, raw));
+  }
+  aRv.ThrowInvalidStateError(
+      "Failed to create the Localization. Check the locales arguments.");
+  return nullptr;
+}
+
+JSObject* DOMLocalization::WrapObject(JSContext* aCx,
+                                      JS::Handle<JSObject*> aGivenProto) {
+  return DOMLocalization_Binding::Wrap(aCx, this, aGivenProto);
+}
+
+void DOMLocalization::Destroy() { DisconnectMutations(); }
+
+DOMLocalization::~DOMLocalization() { Destroy(); }
+
+bool DOMLocalization::HasPendingMutations() const {
+  return mMutations && mMutations->HasPendingMutations();
+}
+
+/**
+ * DOMLocalization API
+ */
+
+void DOMLocalization::ConnectRoot(nsINode& aNode) {
+  nsCOMPtr<nsIGlobalObject> global = aNode.GetOwnerGlobal();
+  if (!global) {
+    return;
+  }
+  MOZ_ASSERT(global == mGlobal,
+             "Cannot add a root that overlaps with existing root.");
+
+#ifdef DEBUG
+  for (nsINode* root : mRoots) {
+    MOZ_ASSERT(
+        root != &aNode && !root->Contains(&aNode) && !aNode.Contains(root),
+        "Cannot add a root that overlaps with existing root.");
+  }
+#endif
+
+  mRoots.Insert(&aNode);
+
+  aNode.AddMutationObserverUnlessExists(mMutations);
+}
+
+void DOMLocalization::DisconnectRoot(nsINode& aNode) {
+  if (mRoots.Contains(&aNode)) {
+    aNode.RemoveMutationObserver(mMutations);
+    mRoots.Remove(&aNode);
+  }
+}
+
+void DOMLocalization::PauseObserving() { mMutations->PauseObserving(); }
+
+void DOMLocalization::ResumeObserving() { mMutations->ResumeObserving(); }
+
+void DOMLocalization::SetAttributes(
+    JSContext* aCx, Element& aElement, const nsAString& aId,
+    const Optional<JS::Handle<JSObject*>>& aArgs, ErrorResult& aRv) {
+  if (aArgs.WasPassed() && aArgs.Value()) {
+    nsAutoString data;
+    JS::Rooted<JS::Value> val(aCx, JS::ObjectValue(*aArgs.Value()));
+    if (!nsContentUtils::StringifyJSON(aCx, val, data,
+                                       UndefinedIsNullStringLiteral)) {
+      aRv.NoteJSContextException(aCx);
+      return;
+    }
+    if (!aElement.AttrValueIs(kNameSpaceID_None, nsGkAtoms::datal10nargs, data,
+                              eCaseMatters)) {
+      aElement.SetAttr(kNameSpaceID_None, nsGkAtoms::datal10nargs, data, true);
+    }
+  } else {
+    aElement.UnsetAttr(kNameSpaceID_None, nsGkAtoms::datal10nargs, true);
+  }
+
+  if (!aElement.AttrValueIs(kNameSpaceID_None, nsGkAtoms::datal10nid, aId,
+                            eCaseMatters)) {
+    aElement.SetAttr(kNameSpaceID_None, nsGkAtoms::datal10nid, aId, true);
+  }
+}
+
+void DOMLocalization::GetAttributes(Element& aElement, L10nIdArgs& aResult,
+                                    ErrorResult& aRv) {
+  nsAutoString l10nId;
+  nsAutoString l10nArgs;
+
+  if (aElement.GetAttr(nsGkAtoms::datal10nid, l10nId)) {
+    CopyUTF16toUTF8(l10nId, aResult.mId);
+  }
+
+  if (aElement.GetAttr(nsGkAtoms::datal10nargs, l10nArgs)) {
+    ConvertStringToL10nArgs(l10nArgs, aResult.mArgs.SetValue(), aRv);
+  }
+}
+
+void DOMLocalization::SetArgs(JSContext* aCx, Element& aElement,
+                              const Optional<JS::Handle<JSObject*>>& aArgs,
+                              ErrorResult& aRv) {
+  if (aArgs.WasPassed() && aArgs.Value()) {
+    nsAutoString data;
+    JS::Rooted<JS::Value> val(aCx, JS::ObjectValue(*aArgs.Value()));
+    if (!nsContentUtils::StringifyJSON(aCx, val, data,
+                                       UndefinedIsNullStringLiteral)) {
+      aRv.NoteJSContextException(aCx);
+      return;
+    }
+    if (!aElement.AttrValueIs(kNameSpaceID_None, nsGkAtoms::datal10nargs, data,
+                              eCaseMatters)) {
+      aElement.SetAttr(kNameSpaceID_None, nsGkAtoms::datal10nargs, data, true);
+    }
+  } else {
+    aElement.UnsetAttr(kNameSpaceID_None, nsGkAtoms::datal10nargs, true);
+  }
+}
+
+already_AddRefed<Promise> DOMLocalization::TranslateFragment(nsINode& aNode,
+                                                             ErrorResult& aRv) {
+  Sequence<OwningNonNull<Element>> elements;
+  GetTranslatables(aNode, elements, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+  return TranslateElements(elements, aRv);
+}
+
+/**
+ * A Promise Handler used to apply the result of
+ * a call to Localization::FormatMessages onto the list
+ * of translatable elements.
+ */
+class ElementTranslationHandler : public PromiseNativeHandler {
+ public:
+  explicit ElementTranslationHandler(DOMLocalization* aDOMLocalization,
+                                     nsXULPrototypeDocument* aProto)
+      : mDOMLocalization(aDOMLocalization), mProto(aProto){};
+
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_CLASS(ElementTranslationHandler)
+
+  nsTArray<nsCOMPtr<Element>>& Elements() { return mElements; }
+
+  void SetReturnValuePromise(Promise* aReturnValuePromise) {
+    mReturnValuePromise = aReturnValuePromise;
+  }
+
+  virtual void ResolvedCallback(JSContext* aCx, JS::Handle<JS::Value> aValue,
+                                ErrorResult& aRv) override {
+    ErrorResult rv;
+
+    nsTArray<Nullable<L10nMessage>> l10nData;
+    if (aValue.isObject()) {
+      JS::ForOfIterator iter(aCx);
+      if (!iter.init(aValue, JS::ForOfIterator::AllowNonIterable)) {
+        mReturnValuePromise->MaybeRejectWithUndefined();
+        return;
+      }
+      if (!iter.valueIsIterable()) {
+        mReturnValuePromise->MaybeRejectWithUndefined();
+        return;
+      }
+
+      JS::Rooted<JS::Value> temp(aCx);
+      while (true) {
+        bool done;
+        if (!iter.next(&temp, &done)) {
+          mReturnValuePromise->MaybeRejectWithUndefined();
+          return;
+        }
+
+        if (done) {
+          break;
+        }
+
+        Nullable<L10nMessage>* slotPtr =
+            l10nData.AppendElement(mozilla::fallible);
+        if (!slotPtr) {
+          mReturnValuePromise->MaybeRejectWithUndefined();
+          return;
+        }
+
+        if (!temp.isNull()) {
+          if (!slotPtr->SetValue().Init(aCx, temp)) {
+            mReturnValuePromise->MaybeRejectWithUndefined();
+            return;
+          }
+        }
+      }
+    }
+
+    bool allTranslated =
+        mDOMLocalization->ApplyTranslations(mElements, l10nData, mProto, rv);
+    if (NS_WARN_IF(rv.Failed()) || !allTranslated) {
+      mReturnValuePromise->MaybeRejectWithUndefined();
+      return;
+    }
+
+    mReturnValuePromise->MaybeResolveWithUndefined();
+  }
+
+  virtual void RejectedCallback(JSContext* aCx, JS::Handle<JS::Value> aValue,
+                                ErrorResult& aRv) override {
+    mReturnValuePromise->MaybeRejectWithClone(aCx, aValue);
+  }
+
+ private:
+  ~ElementTranslationHandler() = default;
+
+  nsTArray<nsCOMPtr<Element>> mElements;
+  RefPtr<DOMLocalization> mDOMLocalization;
+  RefPtr<Promise> mReturnValuePromise;
+  RefPtr<nsXULPrototypeDocument> mProto;
+};
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(ElementTranslationHandler)
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTION_CLASS(ElementTranslationHandler)
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(ElementTranslationHandler)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(ElementTranslationHandler)
+
+NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN(ElementTranslationHandler)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mElements)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mDOMLocalization)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mReturnValuePromise)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mProto)
+NS_IMPL_CYCLE_COLLECTION_UNLINK_END
+
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN(ElementTranslationHandler)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mElements)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mDOMLocalization)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mReturnValuePromise)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mProto)
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_END
+
+already_AddRefed<Promise> DOMLocalization::TranslateElements(
+    const nsTArray<OwningNonNull<Element>>& aElements, ErrorResult& aRv) {
+  return TranslateElements(aElements, nullptr, aRv);
+}
+
+already_AddRefed<Promise> DOMLocalization::TranslateElements(
+    const nsTArray<OwningNonNull<Element>>& aElements,
+    nsXULPrototypeDocument* aProto, ErrorResult& aRv) {
+  Sequence<OwningUTF8StringOrL10nIdArgs> l10nKeys;
+  RefPtr<ElementTranslationHandler> nativeHandler =
+      new ElementTranslationHandler(this, aProto);
+  nsTArray<nsCOMPtr<Element>>& domElements = nativeHandler->Elements();
+  domElements.SetCapacity(aElements.Length());
+
+  if (!mGlobal) {
+    aRv.Throw(NS_ERROR_UNEXPECTED);
+    return nullptr;
+  }
+
+  for (auto& domElement : aElements) {
+    if (!domElement->HasAttr(nsGkAtoms::datal10nid)) {
+      continue;
+    }
+
+    OwningUTF8StringOrL10nIdArgs* key = l10nKeys.AppendElement(fallible);
+    if (!key) {
+      aRv.Throw(NS_ERROR_OUT_OF_MEMORY);
+      return nullptr;
+    }
+
+    GetAttributes(*domElement, key->SetAsL10nIdArgs(), aRv);
+    if (NS_WARN_IF(aRv.Failed())) {
+      return nullptr;
+    }
+
+    if (!domElements.AppendElement(domElement, fallible)) {
+      // This can't really happen, we SetCapacity'd above...
+      aRv.Throw(NS_ERROR_OUT_OF_MEMORY);
+      return nullptr;
+    }
+  }
+
+  RefPtr<Promise> promise = Promise::Create(mGlobal, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+
+  if (IsSync()) {
+    nsTArray<Nullable<L10nMessage>> l10nMessages;
+
+    FormatMessagesSync(l10nKeys, l10nMessages, aRv);
+
+    if (NS_WARN_IF(aRv.Failed())) {
+      promise->MaybeRejectWithUndefined();
+      return promise.forget();
+    }
+
+    bool allTranslated =
+        ApplyTranslations(domElements, l10nMessages, aProto, aRv);
+    if (NS_WARN_IF(aRv.Failed()) || !allTranslated) {
+      promise->MaybeRejectWithUndefined();
+      return promise.forget();
+    }
+
+    promise->MaybeResolveWithUndefined();
+    return promise.forget();
+  }
+  RefPtr<Promise> callbackResult = FormatMessages(l10nKeys, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+  nativeHandler->SetReturnValuePromise(promise);
+  callbackResult->AppendNativeHandler(nativeHandler);
+  return MaybeWrapPromise(promise);
+}
+
+/**
+ * Promise handler used to set localization data on
+ * roots of elements that got successfully translated.
+ */
+class L10nRootTranslationHandler final : public PromiseNativeHandler {
+ public:
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_CLASS(L10nRootTranslationHandler)
+
+  explicit L10nRootTranslationHandler(Element* aRoot) : mRoot(aRoot) {}
+
+  void ResolvedCallback(JSContext* aCx, JS::Handle<JS::Value> aValue,
+                        ErrorResult& aRv) override {
+    DOMLocalization::SetRootInfo(mRoot);
+  }
+
+  void RejectedCallback(JSContext* aCx, JS::Handle<JS::Value> aValue,
+                        ErrorResult& aRv) override {}
+
+ private:
+  ~L10nRootTranslationHandler() = default;
+
+  RefPtr<Element> mRoot;
+};
+
+NS_IMPL_CYCLE_COLLECTION(L10nRootTranslationHandler, mRoot)
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(L10nRootTranslationHandler)
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(L10nRootTranslationHandler)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(L10nRootTranslationHandler)
+
+already_AddRefed<Promise> DOMLocalization::TranslateRoots(ErrorResult& aRv) {
+  nsTArray<RefPtr<Promise>> promises;
+
+  for (nsINode* root : mRoots) {
+    RefPtr<Promise> promise = TranslateFragment(*root, aRv);
+    if (MOZ_UNLIKELY(aRv.Failed())) {
+      return nullptr;
+    }
+
+    // If the root is an element, we'll add a native handler
+    // to set root info (language, direction etc.) on it
+    // once the localization finishes.
+    if (root->IsElement()) {
+      RefPtr<L10nRootTranslationHandler> nativeHandler =
+          new L10nRootTranslationHandler(root->AsElement());
+      promise->AppendNativeHandler(nativeHandler);
+    }
+
+    promises.AppendElement(promise);
+  }
+  AutoEntryScript aes(mGlobal, "DOMLocalization TranslateRoots");
+  return Promise::All(aes.cx(), promises, aRv);
+}
+
+/**
+ * Helper methods
+ */
+
+/* static */
+void DOMLocalization::GetTranslatables(
+    nsINode& aNode, Sequence<OwningNonNull<Element>>& aElements,
+    ErrorResult& aRv) {
+  nsIContent* node =
+      aNode.IsContent() ? aNode.AsContent() : aNode.GetFirstChild();
+  for (; node; node = node->GetNextNode(&aNode)) {
+    if (!node->IsElement()) {
+      continue;
+    }
+
+    Element* domElement = node->AsElement();
+
+    if (!domElement->HasAttr(nsGkAtoms::datal10nid)) {
+      continue;
+    }
+
+    if (!aElements.AppendElement(*domElement, fallible)) {
+      aRv.Throw(NS_ERROR_OUT_OF_MEMORY);
+      return;
+    }
+  }
+}
+
+/* static */
+void DOMLocalization::SetRootInfo(Element* aElement) {
+  nsAutoCString primaryLocale;
+  LocaleService::GetInstance()->GetAppLocaleAsBCP47(primaryLocale);
+  aElement->SetAttr(kNameSpaceID_None, nsGkAtoms::lang,
+                    NS_ConvertUTF8toUTF16(primaryLocale), true);
+
+  nsAutoString dir;
+  if (LocaleService::GetInstance()->IsAppLocaleRTL()) {
+    nsGkAtoms::rtl->ToString(dir);
+  } else {
+    nsGkAtoms::ltr->ToString(dir);
+  }
+
+  uint32_t nameSpace = aElement->GetNameSpaceID();
+  nsAtom* dirAtom =
+      nameSpace == kNameSpaceID_XUL ? nsGkAtoms::localedir : nsGkAtoms::dir;
+
+  aElement->SetAttr(kNameSpaceID_None, dirAtom, dir, true);
+}
+
+bool DOMLocalization::ApplyTranslations(
+    nsTArray<nsCOMPtr<Element>>& aElements,
+    nsTArray<Nullable<L10nMessage>>& aTranslations,
+    nsXULPrototypeDocument* aProto, ErrorResult& aRv) {
+  if (aElements.Length() != aTranslations.Length()) {
+    aRv.Throw(NS_ERROR_FAILURE);
+    return false;
+  }
+
+  PauseObserving();
+
+  bool hasMissingTranslation = false;
+
+  nsTArray<L10nOverlaysError> errors;
+  for (size_t i = 0; i < aTranslations.Length(); ++i) {
+    nsCOMPtr elem = aElements[i];
+    if (aTranslations[i].IsNull()) {
+      hasMissingTranslation = true;
+      continue;
+    }
+    // If we have a proto, we expect all elements are connected up.
+    // If they're not, they may have been removed by earlier translations.
+    // We will have added an error in L10nOverlays in this case.
+    // This is an error in fluent use, but shouldn't be crashing. There's
+    // also no point translating the element - skip it:
+    if (aProto && !elem->IsInComposedDoc()) {
+      continue;
+    }
+
+    // It is possible that someone removed the `data-l10n-id` from the element
+    // before the async translation completed. In that case, skip applying
+    // the translation.
+    if (!elem->HasAttr(nsGkAtoms::datal10nid)) {
+      continue;
+    }
+    L10nOverlays::TranslateElement(*elem, aTranslations[i].Value(), errors,
+                                   aRv);
+    if (NS_WARN_IF(aRv.Failed())) {
+      hasMissingTranslation = true;
+      continue;
+    }
+    if (aProto) {
+      // We only need to rebuild deep if the translation has a value.
+      // Otherwise we'll only rebuild the attributes.
+      aProto->RebuildL10nPrototype(elem,
+                                   !aTranslations[i].Value().mValue.IsVoid());
+    }
+  }
+
+  ReportL10nOverlaysErrors(errors);
+
+  ResumeObserving();
+
+  return !hasMissingTranslation;
+}
+
+/* Protected */
+
+void DOMLocalization::OnChange() {
+  Localization::OnChange();
+  RefPtr<Promise> promise = TranslateRoots(IgnoreErrors());
+}
+
+void DOMLocalization::DisconnectMutations() {
+  if (mMutations) {
+    mMutations->Disconnect();
+    DisconnectRoots();
+  }
+}
+
+void DOMLocalization::DisconnectRoots() {
+  for (nsINode* node : mRoots) {
+    node->RemoveMutationObserver(mMutations);
+  }
+  mRoots.Clear();
+}
+
+void DOMLocalization::ReportL10nOverlaysErrors(
+    nsTArray<L10nOverlaysError>& aErrors) {
+  nsAutoString msg;
+
+  for (auto& error : aErrors) {
+    if (error.mCode.WasPassed()) {
+      msg = u"[fluent-dom] "_ns;
+      switch (error.mCode.Value()) {
+        case L10nOverlays_Binding::ERROR_FORBIDDEN_TYPE:
+          msg += u"An element of forbidden type \""_ns +
+                 error.mTranslatedElementName.Value() +
+                 nsLiteralString(
+                     u"\" was found in the translation. Only safe text-level "
+                     "elements and elements with data-l10n-name are allowed.");
+          break;
+        case L10nOverlays_Binding::ERROR_NAMED_ELEMENT_MISSING:
+          msg += u"An element named \""_ns + error.mL10nName.Value() +
+                 u"\" wasn't found in the source."_ns;
+          break;
+        case L10nOverlays_Binding::ERROR_NAMED_ELEMENT_TYPE_MISMATCH:
+          msg += u"An element named \""_ns + error.mL10nName.Value() +
+                 nsLiteralString(
+                     u"\" was found in the translation but its type ") +
+                 error.mTranslatedElementName.Value() +
+                 nsLiteralString(
+                     u" didn't match the element found in the source ") +
+                 error.mSourceElementName.Value() + u"."_ns;
+          break;
+        case L10nOverlays_Binding::ERROR_TRANSLATED_ELEMENT_DISCONNECTED:
+          msg += u"The element using message \""_ns + error.mL10nName.Value() +
+                 nsLiteralString(
+                     u"\" was removed from the DOM when translating its \"") +
+                 error.mTranslatedElementName.Value() + u"\" parent."_ns;
+          break;
+        case L10nOverlays_Binding::ERROR_TRANSLATED_ELEMENT_DISALLOWED_DOM:
+          msg += nsLiteralString(
+                     u"While translating an element with fluent ID \"") +
+                 error.mL10nName.Value() + u"\" a child element of type \""_ns +
+                 error.mTranslatedElementName.Value() +
+                 nsLiteralString(
+                     u"\" was removed. Either the fluent message "
+                     "does not contain markup, or it does not contain markup "
+                     "of this type.");
+          break;
+        case L10nOverlays_Binding::ERROR_UNKNOWN:
+        default:
+          msg += nsLiteralString(
+              u"Unknown error happened while translating an element.");
+          break;
+      }
+      nsPIDOMWindowInner* innerWindow = GetParentObject()->GetAsInnerWindow();
+      Document* doc = innerWindow ? innerWindow->GetExtantDoc() : nullptr;
+      if (doc) {
+        nsContentUtils::ReportToConsoleNonLocalized(
+            msg, nsIScriptError::warningFlag, "DOM"_ns, doc);
+      } else {
+        NS_WARNING("Failed to report l10n DOM Overlay errors to console.");
+      }
+      printf_stderr("%s\n", NS_ConvertUTF16toUTF8(msg).get());
+    }
+  }
+}
+
+void DOMLocalization::ConvertStringToL10nArgs(const nsString& aInput,
+                                              intl::L10nArgs& aRetVal,
+                                              ErrorResult& aRv) {
+  if (aInput.IsEmpty()) {
+    // There are no properties.
+    return;
+  }
+
+  Json::Value args;
+  Json::Reader jsonReader;
+
+  if (!jsonReader.parse(NS_ConvertUTF16toUTF8(aInput).get(), args, false)) {
+    nsTArray<nsCString> errors{
+        "[dom/l10n] Failed to parse l10n-args JSON: "_ns +
+            NS_ConvertUTF16toUTF8(aInput),
+    };
+    MaybeReportErrorsToGecko(errors, aRv, GetParentObject());
+    return;
+  }
+
+  if (!args.isObject()) {
+    nsTArray<nsCString> errors{
+        "[dom/l10n] Failed to parse l10n-args JSON: "_ns +
+            NS_ConvertUTF16toUTF8(aInput),
+    };
+    MaybeReportErrorsToGecko(errors, aRv, GetParentObject());
+    return;
+  }
+
+  for (Json::ValueConstIterator iter = args.begin(); iter != args.end();
+       ++iter) {
+    L10nArgs::EntryType* newEntry = aRetVal.Entries().AppendElement(fallible);
+    if (!newEntry) {
+      aRv.Throw(NS_ERROR_OUT_OF_MEMORY);
+      return;
+    }
+    newEntry->mKey = iter.name().c_str();
+    if (iter->isString()) {
+      newEntry->mValue.SetValue().RawSetAsUTF8String().Assign(
+          iter->asString().c_str(), iter->asString().length());
+    } else if (iter->isDouble()) {
+      newEntry->mValue.SetValue().RawSetAsDouble() = iter->asDouble();
+    } else if (iter->isBool()) {
+      if (iter->asBool()) {
+        newEntry->mValue.SetValue().RawSetAsUTF8String().Assign("true");
+      } else {
+        newEntry->mValue.SetValue().RawSetAsUTF8String().Assign("false");
+      }
+    } else if (iter->isNull()) {
+      newEntry->mValue.SetNull();
+    } else {
+      nsTArray<nsCString> errors{
+          "[dom/l10n] Failed to convert l10n-args JSON: "_ns +
+              NS_ConvertUTF16toUTF8(aInput),
+      };
+      MaybeReportErrorsToGecko(errors, aRv, GetParentObject());
+    }
+  }
+}
diff --git a/dom/l10n/DOMLocalization.h b/dom/l10n/DOMLocalization.h
new file mode 100644
index 0000000000..ab66194d31
--- /dev/null
+++ b/dom/l10n/DOMLocalization.h
@@ -0,0 +1,137 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_l10n_DOMLocalization_h
+#define mozilla_dom_l10n_DOMLocalization_h
+
+#include "nsTHashSet.h"
+#include "nsXULPrototypeDocument.h"
+#include "mozilla/intl/Localization.h"
+#include "mozilla/dom/DOMLocalizationBinding.h"
+#include "mozilla/dom/L10nMutations.h"
+#include "mozilla/dom/L10nOverlaysBinding.h"
+#include "mozilla/dom/LocalizationBinding.h"
+#include "mozilla/dom/PromiseNativeHandler.h"
+#include "mozilla/intl/L10nRegistry.h"
+
+// XXX Avoid including this here by moving function bodies to the cpp file
+#include "nsINode.h"
+
+namespace mozilla::dom {
+
+class Element;
+class L10nMutations;
+
+class DOMLocalization : public intl::Localization {
+ public:
+  NS_DECL_ISUPPORTS_INHERITED
+  NS_DECL_CYCLE_COLLECTION_CLASS_INHERITED(DOMLocalization, Localization)
+
+  void Destroy();
+
+  static already_AddRefed<DOMLocalization> Constructor(
+      const dom::GlobalObject& aGlobal,
+      const dom::Sequence<dom::OwningUTF8StringOrResourceId>& aResourceIds,
+      bool aIsSync,
+      const dom::Optional<dom::NonNull<intl::L10nRegistry>>& aRegistry,
+      const dom::Optional<dom::Sequence<nsCString>>& aLocales,
+      ErrorResult& aRv);
+
+  JSObject* WrapObject(JSContext*, JS::Handle<JSObject*> aGivenProto) override;
+
+  bool HasPendingMutations() const;
+
+  /**
+   * DOMLocalization API
+   *
+   * Methods documentation in DOMLocalization.webidl
+   */
+
+  void ConnectRoot(nsINode& aNode);
+  void DisconnectRoot(nsINode& aNode);
+
+  void PauseObserving();
+  void ResumeObserving();
+
+  void SetAttributes(JSContext* aCx, Element& aElement, const nsAString& aId,
+                     const Optional<JS::Handle<JSObject*>>& aArgs,
+                     ErrorResult& aRv);
+  void GetAttributes(Element& aElement, L10nIdArgs& aResult, ErrorResult& aRv);
+
+  void SetArgs(JSContext* aCx, Element& aElement,
+               const Optional<JS::Handle<JSObject*>>& aArgs, ErrorResult& aRv);
+
+  already_AddRefed<Promise> TranslateFragment(nsINode& aNode, ErrorResult& aRv);
+
+  already_AddRefed<Promise> TranslateElements(
+      const nsTArray<OwningNonNull<Element>>& aElements, ErrorResult& aRv);
+  already_AddRefed<Promise> TranslateElements(
+      const nsTArray<OwningNonNull<Element>>& aElements,
+      nsXULPrototypeDocument* aProto, ErrorResult& aRv);
+
+  already_AddRefed<Promise> TranslateRoots(ErrorResult& aRv);
+
+  /**
+   * Helper methods
+   */
+
+  /**
+   * Accumulates all translatable elements (ones containing
+   * a `data-l10n-id` attribute) from under a node into
+   * a list of elements.
+   */
+  static void GetTranslatables(nsINode& aNode,
+                               Sequence<OwningNonNull<Element>>& aElements,
+                               ErrorResult& aRv);
+
+  /**
+   * Sets the root information such as locale and direction.
+   */
+  static void SetRootInfo(Element* aElement);
+
+  /**
+   * Applies l10n translations on translatable elements.
+   *
+   * If `aProto` gets passed, it'll be used to cache
+   * the localized elements.
+   *
+   * Result is `true` if all translations were applied
+   * successfully, and `false` otherwise.
+   */
+  bool ApplyTranslations(nsTArray<nsCOMPtr<Element>>& aElements,
+                         nsTArray<Nullable<L10nMessage>>& aTranslations,
+                         nsXULPrototypeDocument* aProto, ErrorResult& aRv);
+
+  bool SubtreeRootInRoots(nsINode* aSubtreeRoot) {
+    for (const auto* key : mRoots) {
+      nsINode* subtreeRoot = key->SubtreeRoot();
+      if (subtreeRoot == aSubtreeRoot) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  DOMLocalization(nsIGlobalObject* aGlobal, bool aSync);
+  DOMLocalization(nsIGlobalObject* aGlobal, bool aIsSync,
+                  const intl::ffi::LocalizationRc* aRaw);
+
+ protected:
+  virtual ~DOMLocalization();
+  void OnChange() override;
+  void DisconnectMutations();
+  void DisconnectRoots();
+  void ReportL10nOverlaysErrors(nsTArray<L10nOverlaysError>& aErrors);
+  void ConvertStringToL10nArgs(const nsString& aInput, intl::L10nArgs& aRetVal,
+                               ErrorResult& aRv);
+
+  RefPtr<L10nMutations> mMutations;
+  nsTHashSet<RefPtr<nsINode>> mRoots;
+};
+
+}  // namespace mozilla::dom
+
+#endif
diff --git a/dom/l10n/DocumentL10n.cpp b/dom/l10n/DocumentL10n.cpp
new file mode 100644
index 0000000000..c53b3aa0c7
--- /dev/null
+++ b/dom/l10n/DocumentL10n.cpp
@@ -0,0 +1,305 @@
+/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim:set ts=2 sw=2 sts=2 et cindent: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "DocumentL10n.h"
+#include "nsIContentSink.h"
+#include "nsContentUtils.h"
+#include "mozilla/dom/AutoEntryScript.h"
+#include "mozilla/dom/Document.h"
+#include "mozilla/dom/DocumentL10nBinding.h"
+
+using namespace mozilla;
+using namespace mozilla::intl;
+using namespace mozilla::dom;
+
+NS_IMPL_CYCLE_COLLECTION_CLASS(DocumentL10n)
+NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN_INHERITED(DocumentL10n, DOMLocalization)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mDocument)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mReady)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mContentSink)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK_PRESERVED_WRAPPER
+NS_IMPL_CYCLE_COLLECTION_UNLINK_END
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN_INHERITED(DocumentL10n, DOMLocalization)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mDocument)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mReady)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mContentSink)
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_END
+
+NS_IMPL_ADDREF_INHERITED(DocumentL10n, DOMLocalization)
+NS_IMPL_RELEASE_INHERITED(DocumentL10n, DOMLocalization)
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(DocumentL10n)
+NS_INTERFACE_MAP_END_INHERITING(DOMLocalization)
+
+/* static */
+RefPtr<DocumentL10n> DocumentL10n::Create(Document* aDocument, bool aSync) {
+  RefPtr<DocumentL10n> l10n = new DocumentL10n(aDocument, aSync);
+
+  IgnoredErrorResult rv;
+  l10n->mReady = Promise::Create(l10n->mGlobal, rv);
+  if (NS_WARN_IF(rv.Failed())) {
+    return nullptr;
+  }
+
+  return l10n.forget();
+}
+
+DocumentL10n::DocumentL10n(Document* aDocument, bool aSync)
+    : DOMLocalization(aDocument->GetScopeObject(), aSync),
+      mDocument(aDocument),
+      mState(DocumentL10nState::Constructed) {
+  mContentSink = do_QueryInterface(aDocument->GetCurrentContentSink());
+}
+
+JSObject* DocumentL10n::WrapObject(JSContext* aCx,
+                                   JS::Handle<JSObject*> aGivenProto) {
+  return DocumentL10n_Binding::Wrap(aCx, this, aGivenProto);
+}
+
+class L10nReadyHandler final : public PromiseNativeHandler {
+ public:
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_CLASS(L10nReadyHandler)
+
+  explicit L10nReadyHandler(Promise* aPromise, DocumentL10n* aDocumentL10n)
+      : mPromise(aPromise), mDocumentL10n(aDocumentL10n) {}
+
+  void ResolvedCallback(JSContext* aCx, JS::Handle<JS::Value> aValue,
+                        ErrorResult& aRv) override {
+    mDocumentL10n->InitialTranslationCompleted(true);
+    mPromise->MaybeResolveWithUndefined();
+  }
+
+  void RejectedCallback(JSContext* aCx, JS::Handle<JS::Value> aValue,
+                        ErrorResult& aRv) override {
+    mDocumentL10n->InitialTranslationCompleted(false);
+
+    nsTArray<nsCString> errors{
+        "[dom/l10n] Could not complete initial document translation."_ns,
+    };
+    IgnoredErrorResult rv;
+    MaybeReportErrorsToGecko(errors, rv, mDocumentL10n->GetParentObject());
+
+    /**
+     * We resolve the mReady here even if we encountered failures, because
+     * there is nothing actionable for the user pending on `mReady` to do here
+     * and we don't want to incentivized consumers of this API to plan the
+     * same pending operation for resolve and reject scenario.
+     *
+     * Additionally, without it, the stderr received "uncaught promise
+     * rejection" warning, which is noisy and not-actionable.
+     *
+     * So instead, we just resolve and report errors.
+     */
+    mPromise->MaybeResolveWithUndefined();
+  }
+
+ private:
+  ~L10nReadyHandler() = default;
+
+  RefPtr<Promise> mPromise;
+  RefPtr<DocumentL10n> mDocumentL10n;
+};
+
+NS_IMPL_CYCLE_COLLECTION(L10nReadyHandler, mPromise, mDocumentL10n)
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(L10nReadyHandler)
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(L10nReadyHandler)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(L10nReadyHandler)
+
+void DocumentL10n::TriggerInitialTranslation() {
+  MOZ_ASSERT(nsContentUtils::IsSafeToRunScript());
+  if (mState >= DocumentL10nState::InitialTranslationTriggered) {
+    return;
+  }
+  if (!mReady) {
+    // If we don't have `mReady` it means that we are in shutdown mode.
+    // See bug 1687118 for details.
+    InitialTranslationCompleted(false);
+    return;
+  }
+
+  AutoAllowLegacyScriptExecution exemption;
+
+  nsTArray<RefPtr<Promise>> promises;
+
+  ErrorResult rv;
+  promises.AppendElement(TranslateDocument(rv));
+  if (NS_WARN_IF(rv.Failed())) {
+    rv.SuppressException();
+    InitialTranslationCompleted(false);
+    mReady->MaybeRejectWithUndefined();
+    return;
+  }
+  promises.AppendElement(TranslateRoots(rv));
+  Element* documentElement = mDocument->GetDocumentElement();
+  if (!documentElement) {
+    InitialTranslationCompleted(false);
+    mReady->MaybeRejectWithUndefined();
+    return;
+  }
+
+  DOMLocalization::ConnectRoot(*documentElement);
+
+  AutoEntryScript aes(mGlobal, "DocumentL10n InitialTranslation");
+  RefPtr<Promise> promise = Promise::All(aes.cx(), promises, rv);
+
+  if (promise->State() == Promise::PromiseState::Resolved) {
+    // If the promise is already resolved, we can fast-track
+    // to initial translation completed.
+    InitialTranslationCompleted(true);
+    mReady->MaybeResolveWithUndefined();
+  } else {
+    RefPtr<PromiseNativeHandler> l10nReadyHandler =
+        new L10nReadyHandler(mReady, this);
+    promise->AppendNativeHandler(l10nReadyHandler);
+
+    mState = DocumentL10nState::InitialTranslationTriggered;
+  }
+}
+
+already_AddRefed<Promise> DocumentL10n::TranslateDocument(ErrorResult& aRv) {
+  MOZ_ASSERT(mState == DocumentL10nState::Constructed,
+             "This method should be called only from Constructed state.");
+  RefPtr<Promise> promise = Promise::Create(mGlobal, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+
+  Element* elem = mDocument->GetDocumentElement();
+  if (!elem) {
+    promise->MaybeRejectWithUndefined();
+    return promise.forget();
+  }
+
+  // 1. Collect all localizable elements.
+  Sequence<OwningNonNull<Element>> elements;
+  GetTranslatables(*elem, elements, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    promise->MaybeRejectWithUndefined();
+    return promise.forget();
+  }
+
+  RefPtr<nsXULPrototypeDocument> proto = mDocument->GetPrototype();
+
+  // 2. Check if the document has a prototype that may cache
+  //    translated elements.
+  if (proto) {
+    // 2.1. Handle the case when we have proto.
+
+    // 2.1.1. Move elements that are not in the proto to a separate
+    //        array.
+    Sequence<OwningNonNull<Element>> nonProtoElements;
+
+    uint32_t i = elements.Length();
+    while (i > 0) {
+      Element* elem = elements.ElementAt(i - 1);
+      MOZ_RELEASE_ASSERT(elem->HasAttr(nsGkAtoms::datal10nid));
+      if (!elem->HasElementCreatedFromPrototypeAndHasUnmodifiedL10n()) {
+        if (NS_WARN_IF(!nonProtoElements.AppendElement(*elem, fallible))) {
+          promise->MaybeRejectWithUndefined();
+          return promise.forget();
+        }
+        elements.RemoveElement(elem);
+      }
+      i--;
+    }
+
+    // We populate the sequence in reverse order. Let's bring it
+    // back to top->bottom one.
+    nonProtoElements.Reverse();
+
+    AutoAllowLegacyScriptExecution exemption;
+
+    nsTArray<RefPtr<Promise>> promises;
+
+    // 2.1.2. If we're not loading from cache, push the elements that
+    //        are in the prototype to be translated and cached.
+    if (!proto->WasL10nCached() && !elements.IsEmpty()) {
+      RefPtr<Promise> translatePromise =
+          TranslateElements(elements, proto, aRv);
+      if (NS_WARN_IF(!translatePromise || aRv.Failed())) {
+        promise->MaybeRejectWithUndefined();
+        return promise.forget();
+      }
+      promises.AppendElement(translatePromise);
+    }
+
+    // 2.1.3. If there are elements that are not in the prototype,
+    //        localize them without attempting to cache and
+    //        independently of if we're loading from cache.
+    if (!nonProtoElements.IsEmpty()) {
+      RefPtr<Promise> nonProtoTranslatePromise =
+          TranslateElements(nonProtoElements, nullptr, aRv);
+      if (NS_WARN_IF(!nonProtoTranslatePromise || aRv.Failed())) {
+        promise->MaybeRejectWithUndefined();
+        return promise.forget();
+      }
+      promises.AppendElement(nonProtoTranslatePromise);
+    }
+
+    // 2.1.4. Collect promises with Promise::All (maybe empty).
+    AutoEntryScript aes(mGlobal, "DocumentL10n InitialTranslationCompleted");
+    promise = Promise::All(aes.cx(), promises, aRv);
+    if (NS_WARN_IF(aRv.Failed())) {
+      return nullptr;
+    }
+  } else {
+    // 2.2. Handle the case when we don't have proto.
+
+    // 2.2.1. Otherwise, translate all available elements,
+    //        without attempting to cache them.
+    promise = TranslateElements(elements, nullptr, aRv);
+    if (NS_WARN_IF(aRv.Failed())) {
+      return nullptr;
+    }
+  }
+
+  return promise.forget();
+}
+
+void DocumentL10n::InitialTranslationCompleted(bool aL10nCached) {
+  if (mState >= DocumentL10nState::Ready) {
+    return;
+  }
+
+  Element* documentElement = mDocument->GetDocumentElement();
+  if (documentElement) {
+    SetRootInfo(documentElement);
+  }
+
+  mState = DocumentL10nState::Ready;
+
+  RefPtr<Document> doc = mDocument;
+  doc->InitialTranslationCompleted(aL10nCached);
+
+  // In XUL scenario contentSink is nullptr.
+  if (mContentSink) {
+    nsCOMPtr<nsIContentSink> sink = mContentSink.forget();
+    sink->InitialTranslationCompleted();
+  }
+
+  // From now on, the state of Localization is unconditionally
+  // async.
+  SetAsync();
+}
+
+void DocumentL10n::ConnectRoot(nsINode& aNode, bool aTranslate,
+                               ErrorResult& aRv) {
+  if (aTranslate) {
+    if (mState >= DocumentL10nState::InitialTranslationTriggered) {
+      RefPtr<Promise> promise = TranslateFragment(aNode, aRv);
+    }
+  }
+  DOMLocalization::ConnectRoot(aNode);
+}
+
+Promise* DocumentL10n::Ready() { return mReady; }
+
+void DocumentL10n::OnCreatePresShell() { mMutations->OnCreatePresShell(); }
diff --git a/dom/l10n/DocumentL10n.h b/dom/l10n/DocumentL10n.h
new file mode 100644
index 0000000000..98e969b184
--- /dev/null
+++ b/dom/l10n/DocumentL10n.h
@@ -0,0 +1,83 @@
+/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim:set ts=2 sw=2 sts=2 et cindent: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_l10n_DocumentL10n_h
+#define mozilla_dom_l10n_DocumentL10n_h
+
+#include "mozilla/dom/DOMLocalization.h"
+
+class nsIContentSink;
+
+namespace mozilla::dom {
+
+class Document;
+
+enum class DocumentL10nState {
+  // State set when the DocumentL10n gets constructed.
+  Constructed = 0,
+
+  // State set when the initial translation got triggered. This happens
+  // if DocumentL10n was constructed during parsing of the document.
+  //
+  // If the DocumentL10n gets constructed later, we'll skip directly to
+  // Ready state.
+  InitialTranslationTriggered,
+
+  // State set the DocumentL10n has been fully initialized, potentially
+  // with initial translation being completed.
+  Ready,
+};
+
+/**
+ * This class maintains localization status of the document.
+ *
+ * The document will initialize it lazily when a link with a localization
+ * resource is added to the document.
+ *
+ * Once initialized, DocumentL10n relays all API methods to an
+ * instance of mozILocalization and maintains a single promise
+ * which gets resolved the first time the document gets translated.
+ */
+class DocumentL10n final : public DOMLocalization {
+ public:
+  NS_DECL_ISUPPORTS_INHERITED
+  NS_DECL_CYCLE_COLLECTION_CLASS_INHERITED(DocumentL10n, DOMLocalization)
+
+  static RefPtr<DocumentL10n> Create(Document* aDocument, bool aSync);
+
+ protected:
+  explicit DocumentL10n(Document* aDocument, bool aSync);
+  virtual ~DocumentL10n() = default;
+
+  RefPtr<Document> mDocument;
+  RefPtr<Promise> mReady;
+  DocumentL10nState mState;
+  nsCOMPtr<nsIContentSink> mContentSink;
+
+ public:
+  virtual JSObject* WrapObject(JSContext* aCx,
+                               JS::Handle<JSObject*> aGivenProto) override;
+
+  Promise* Ready();
+
+  void TriggerInitialTranslation();
+  already_AddRefed<Promise> TranslateDocument(ErrorResult& aRv);
+
+  void InitialTranslationCompleted(bool aL10nCached);
+
+  Document* GetDocument() const { return mDocument; };
+  void OnCreatePresShell();
+
+  void ConnectRoot(nsINode& aNode, bool aTranslate, ErrorResult& aRv);
+
+  DocumentL10nState GetState() { return mState; };
+
+  bool mBlockingLayout = false;
+};
+
+}  // namespace mozilla::dom
+
+#endif  // mozilla_dom_l10n_DocumentL10n_h
diff --git a/dom/l10n/L10nMutations.cpp b/dom/l10n/L10nMutations.cpp
new file mode 100644
index 0000000000..03a4afaa5b
--- /dev/null
+++ b/dom/l10n/L10nMutations.cpp
@@ -0,0 +1,359 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "L10nMutations.h"
+#include "mozilla/dom/DocumentInlines.h"
+#include "nsRefreshDriver.h"
+#include "DOMLocalization.h"
+#include "mozilla/intl/Localization.h"
+#include "nsThreadManager.h"
+
+using namespace mozilla;
+using namespace mozilla::intl;
+using namespace mozilla::dom;
+
+NS_IMPL_CYCLE_COLLECTION_CLASS(L10nMutations)
+
+NS_IMPL_CYCLE_COLLECTION_UNLINK_BEGIN(L10nMutations)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mPendingElements)
+  NS_IMPL_CYCLE_COLLECTION_UNLINK(mPendingElementsHash)
+NS_IMPL_CYCLE_COLLECTION_UNLINK_END
+
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_BEGIN(L10nMutations)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mPendingElements)
+  NS_IMPL_CYCLE_COLLECTION_TRAVERSE(mPendingElementsHash)
+NS_IMPL_CYCLE_COLLECTION_TRAVERSE_END
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(L10nMutations)
+  NS_INTERFACE_MAP_ENTRY(nsIMutationObserver)
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(L10nMutations)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(L10nMutations)
+
+L10nMutations::L10nMutations(DOMLocalization* aDOMLocalization)
+    : mDOMLocalization(aDOMLocalization) {
+  mObserving = true;
+}
+
+L10nMutations::~L10nMutations() {
+  StopRefreshObserver();
+  MOZ_ASSERT(!mDOMLocalization,
+             "DOMLocalization<-->L10nMutations cycle should be broken.");
+}
+
+void L10nMutations::AttributeChanged(Element* aElement, int32_t aNameSpaceID,
+                                     nsAtom* aAttribute, int32_t aModType,
+                                     const nsAttrValue* aOldValue) {
+  if (!mObserving) {
+    return;
+  }
+
+  if (aNameSpaceID == kNameSpaceID_None &&
+      (aAttribute == nsGkAtoms::datal10nid ||
+       aAttribute == nsGkAtoms::datal10nargs)) {
+    if (IsInRoots(aElement)) {
+      L10nElementChanged(aElement);
+    }
+  }
+}
+
+void L10nMutations::ContentAppended(nsIContent* aChild) {
+  if (!mObserving) {
+    return;
+  }
+
+  if (!IsInRoots(aChild)) {
+    return;
+  }
+
+  Sequence<OwningNonNull<Element>> elements;
+  for (nsIContent* node = aChild; node; node = node->GetNextSibling()) {
+    if (node->IsElement()) {
+      DOMLocalization::GetTranslatables(*node, elements, IgnoreErrors());
+    }
+  }
+
+  for (auto& elem : elements) {
+    L10nElementChanged(elem);
+  }
+}
+
+void L10nMutations::ContentInserted(nsIContent* aChild) {
+  if (!mObserving) {
+    return;
+  }
+
+  if (!aChild->IsElement()) {
+    return;
+  }
+  Element* elem = aChild->AsElement();
+
+  if (!IsInRoots(elem)) {
+    return;
+  }
+
+  Sequence<OwningNonNull<Element>> elements;
+  DOMLocalization::GetTranslatables(*aChild, elements, IgnoreErrors());
+
+  for (auto& elem : elements) {
+    L10nElementChanged(elem);
+  }
+}
+
+void L10nMutations::ContentRemoved(nsIContent* aChild,
+                                   nsIContent* aPreviousSibling) {
+  if (!mObserving || mPendingElements.IsEmpty()) {
+    return;
+  }
+
+  Element* elem = Element::FromNode(*aChild);
+  if (!elem || !IsInRoots(elem)) {
+    return;
+  }
+
+  Sequence<OwningNonNull<Element>> elements;
+  DOMLocalization::GetTranslatables(*aChild, elements, IgnoreErrors());
+
+  for (auto& elem : elements) {
+    if (mPendingElementsHash.EnsureRemoved(elem)) {
+      mPendingElements.RemoveElement(elem);
+    }
+  }
+
+  if (!HasPendingMutations()) {
+    nsContentUtils::AddScriptRunner(NewRunnableMethod(
+        "MaybeFirePendingTranslationsFinished", this,
+        &L10nMutations::MaybeFirePendingTranslationsFinished));
+  }
+}
+
+void L10nMutations::L10nElementChanged(Element* aElement) {
+  const bool wasEmpty = mPendingElements.IsEmpty();
+
+  if (mPendingElementsHash.EnsureInserted(aElement)) {
+    mPendingElements.AppendElement(aElement);
+  }
+
+  if (!wasEmpty) {
+    return;
+  }
+
+  if (!mRefreshDriver) {
+    StartRefreshObserver();
+  }
+
+  if (!mBlockingLoad) {
+    Document* doc = GetDocument();
+    if (doc && doc->GetReadyStateEnum() != Document::READYSTATE_COMPLETE) {
+      doc->BlockOnload();
+      mBlockingLoad = true;
+    }
+  }
+
+  if (mBlockingLoad && !mPendingBlockingLoadFlush) {
+    // We want to make sure we flush translations and don't block the load
+    // indefinitely (and, in fact, that we do it rather soon, even if the
+    // refresh driver is not ticking yet).
+    //
+    // In some platforms (mainly Wayland) the load of the main document
+    // causes vsync to start running and start ticking the refresh driver,
+    // so we can't rely on the refresh driver ticking yet.
+    RefPtr<nsIRunnable> task =
+        NewRunnableMethod("FlushPendingTranslationsBeforeLoad", this,
+                          &L10nMutations::FlushPendingTranslationsBeforeLoad);
+    nsThreadManager::get().DispatchDirectTaskToCurrentThread(task);
+    mPendingBlockingLoadFlush = true;
+  }
+}
+
+void L10nMutations::PauseObserving() { mObserving = false; }
+
+void L10nMutations::ResumeObserving() { mObserving = true; }
+
+void L10nMutations::WillRefresh(mozilla::TimeStamp aTime) {
+  StopRefreshObserver();
+  FlushPendingTranslations();
+}
+
+/**
+ * The handler for the `TranslateElements` promise used to turn
+ * a potential rejection into a console warning.
+ **/
+class L10nMutationFinalizationHandler final : public PromiseNativeHandler {
+ public:
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_CLASS(L10nMutationFinalizationHandler)
+
+  explicit L10nMutationFinalizationHandler(L10nMutations* aMutations,
+                                           nsIGlobalObject* aGlobal)
+      : mMutations(aMutations), mGlobal(aGlobal) {}
+
+  MOZ_CAN_RUN_SCRIPT void Settled() {
+    if (RefPtr mutations = mMutations) {
+      mutations->PendingPromiseSettled();
+    }
+  }
+
+  MOZ_CAN_RUN_SCRIPT void ResolvedCallback(JSContext* aCx,
+                                           JS::Handle<JS::Value> aValue,
+                                           ErrorResult& aRv) override {
+    Settled();
+  }
+
+  MOZ_CAN_RUN_SCRIPT void RejectedCallback(JSContext* aCx,
+                                           JS::Handle<JS::Value> aValue,
+                                           ErrorResult& aRv) override {
+    nsTArray<nsCString> errors{
+        "[dom/l10n] Errors during l10n mutation frame."_ns,
+    };
+    MaybeReportErrorsToGecko(errors, IgnoreErrors(), mGlobal);
+    Settled();
+  }
+
+ private:
+  ~L10nMutationFinalizationHandler() = default;
+
+  RefPtr<L10nMutations> mMutations;
+  nsCOMPtr<nsIGlobalObject> mGlobal;
+};
+
+NS_IMPL_CYCLE_COLLECTION(L10nMutationFinalizationHandler, mGlobal, mMutations)
+
+NS_INTERFACE_MAP_BEGIN_CYCLE_COLLECTION(L10nMutationFinalizationHandler)
+  NS_INTERFACE_MAP_ENTRY(nsISupports)
+NS_INTERFACE_MAP_END
+
+NS_IMPL_CYCLE_COLLECTING_ADDREF(L10nMutationFinalizationHandler)
+NS_IMPL_CYCLE_COLLECTING_RELEASE(L10nMutationFinalizationHandler)
+
+void L10nMutations::FlushPendingTranslationsBeforeLoad() {
+  MOZ_ASSERT(mPendingBlockingLoadFlush);
+  mPendingBlockingLoadFlush = false;
+  FlushPendingTranslations();
+}
+
+void L10nMutations::FlushPendingTranslations() {
+  if (!mDOMLocalization) {
+    return;
+  }
+
+  nsTArray<OwningNonNull<Element>> elements;
+  for (auto& elem : mPendingElements) {
+    if (elem->HasAttr(nsGkAtoms::datal10nid)) {
+      elements.AppendElement(*elem);
+    }
+  }
+
+  mPendingElementsHash.Clear();
+  mPendingElements.Clear();
+
+  RefPtr<Promise> promise =
+      mDOMLocalization->TranslateElements(elements, IgnoreErrors());
+  if (promise && promise->State() == Promise::PromiseState::Pending) {
+    mPendingPromises++;
+    auto l10nMutationFinalizationHandler =
+        MakeRefPtr<L10nMutationFinalizationHandler>(
+            this, mDOMLocalization->GetParentObject());
+    promise->AppendNativeHandler(l10nMutationFinalizationHandler);
+  }
+
+  MaybeFirePendingTranslationsFinished();
+}
+
+void L10nMutations::PendingPromiseSettled() {
+  MOZ_DIAGNOSTIC_ASSERT(mPendingPromises);
+  mPendingPromises--;
+  MaybeFirePendingTranslationsFinished();
+}
+
+void L10nMutations::MaybeFirePendingTranslationsFinished() {
+  if (HasPendingMutations()) {
+    return;
+  }
+
+  RefPtr doc = GetDocument();
+  if (NS_WARN_IF(!doc)) {
+    return;
+  }
+
+  if (mBlockingLoad) {
+    mBlockingLoad = false;
+    doc->UnblockOnload(false);
+  }
+  nsContentUtils::DispatchEventOnlyToChrome(
+      doc, doc, u"L10nMutationsFinished"_ns, CanBubble::eNo, Cancelable::eNo,
+      Composed::eNo, nullptr);
+}
+
+void L10nMutations::Disconnect() {
+  StopRefreshObserver();
+  mDOMLocalization = nullptr;
+}
+
+Document* L10nMutations::GetDocument() const {
+  if (!mDOMLocalization) {
+    return nullptr;
+  }
+  auto* innerWindow = mDOMLocalization->GetParentObject()->GetAsInnerWindow();
+  if (!innerWindow) {
+    return nullptr;
+  }
+  return innerWindow->GetExtantDoc();
+}
+
+void L10nMutations::StartRefreshObserver() {
+  if (!mDOMLocalization || mRefreshDriver) {
+    return;
+  }
+  if (Document* doc = GetDocument()) {
+    if (nsPresContext* ctx = doc->GetPresContext()) {
+      mRefreshDriver = ctx->RefreshDriver();
+    }
+  }
+
+  // If we can't start the refresh driver, it means
+  // that the presContext is not available yet.
+  // In that case, we'll trigger the flush of pending
+  // elements in Document::CreatePresShell.
+  if (mRefreshDriver) {
+    mRefreshDriver->AddRefreshObserver(this, FlushType::Style,
+                                       "L10n mutations");
+  } else {
+    NS_WARNING("[l10n][mutations] Failed to start a refresh observer.");
+  }
+}
+
+void L10nMutations::StopRefreshObserver() {
+  if (mRefreshDriver) {
+    mRefreshDriver->RemoveRefreshObserver(this, FlushType::Style);
+    mRefreshDriver = nullptr;
+  }
+}
+
+void L10nMutations::OnCreatePresShell() {
+  StopRefreshObserver();
+  if (!mPendingElements.IsEmpty()) {
+    StartRefreshObserver();
+  }
+}
+
+bool L10nMutations::IsInRoots(nsINode* aNode) {
+  // If the root of the mutated element is in the light DOM,
+  // we know it must be covered by our observer directly.
+  //
+  // Otherwise, we need to check if its subtree root is the same
+  // as any of the `DOMLocalization::mRoots` subtree roots.
+  nsINode* root = aNode->SubtreeRoot();
+
+  // If element is in light DOM, it must be covered by one of
+  // the DOMLocalization roots to end up here.
+  MOZ_ASSERT_IF(!root->IsShadowRoot(),
+                mDOMLocalization->SubtreeRootInRoots(root));
+
+  return !root->IsShadowRoot() || mDOMLocalization->SubtreeRootInRoots(root);
+}
diff --git a/dom/l10n/L10nMutations.h b/dom/l10n/L10nMutations.h
new file mode 100644
index 0000000000..afc08445e0
--- /dev/null
+++ b/dom/l10n/L10nMutations.h
@@ -0,0 +1,101 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_l10n_L10nMutations_h
+#define mozilla_dom_l10n_L10nMutations_h
+
+#include "nsCycleCollectionParticipant.h"
+#include "nsHashKeys.h"
+#include "nsRefreshObservers.h"
+#include "nsStubMutationObserver.h"
+#include "nsTHashSet.h"
+
+class nsRefreshDriver;
+
+namespace mozilla::dom {
+class Document;
+class DOMLocalization;
+/**
+ * L10nMutations manage observing roots for localization
+ * changes and coalescing pending translations into
+ * batches - one per animation frame.
+ */
+class L10nMutations final : public nsStubMultiMutationObserver,
+                            public nsARefreshObserver {
+ public:
+  NS_DECL_CYCLE_COLLECTING_ISUPPORTS
+  NS_DECL_CYCLE_COLLECTION_CLASS_AMBIGUOUS(L10nMutations, nsIMutationObserver)
+  NS_DECL_NSIMUTATIONOBSERVER_CONTENTAPPENDED
+  NS_DECL_NSIMUTATIONOBSERVER_CONTENTINSERTED
+  NS_DECL_NSIMUTATIONOBSERVER_CONTENTREMOVED
+  NS_DECL_NSIMUTATIONOBSERVER_ATTRIBUTECHANGED
+
+  explicit L10nMutations(DOMLocalization* aDOMLocalization);
+
+  /**
+   * Pause root observation.
+   * This is useful for injecting already-translated
+   * content into an observed root, without causing
+   * superflues translation.
+   */
+  void PauseObserving();
+
+  /**
+   * Resume root observation.
+   */
+  void ResumeObserving();
+
+  /**
+   * Disconnect roots, stop refresh observer
+   * and break the cycle collection deadlock
+   * by removing the reference to mDOMLocalization.
+   */
+  void Disconnect();
+
+  /**
+   * Called when PresShell gets created for the document.
+   * If there are already pending mutations, this
+   * will schedule the refresh driver to translate them.
+   */
+  void OnCreatePresShell();
+
+  bool HasPendingMutations() const {
+    return !mPendingElements.IsEmpty() || mPendingPromises;
+  }
+
+  MOZ_CAN_RUN_SCRIPT void PendingPromiseSettled();
+
+ private:
+  bool mObserving = false;
+  bool mBlockingLoad = false;
+  bool mPendingBlockingLoadFlush = false;
+  uint32_t mPendingPromises = 0;
+  RefPtr<nsRefreshDriver> mRefreshDriver;
+  DOMLocalization* mDOMLocalization;
+
+  // The hash is used to speed up lookups into mPendingElements, which we need
+  // to guarantee some consistent ordering of operations.
+  nsTHashSet<RefPtr<Element>> mPendingElementsHash;
+  nsTArray<RefPtr<Element>> mPendingElements;
+
+  Document* GetDocument() const;
+
+  MOZ_CAN_RUN_SCRIPT void WillRefresh(mozilla::TimeStamp aTime) override;
+
+  void StartRefreshObserver();
+  void StopRefreshObserver();
+  void L10nElementChanged(Element* aElement);
+  MOZ_CAN_RUN_SCRIPT void FlushPendingTranslations();
+  MOZ_CAN_RUN_SCRIPT void FlushPendingTranslationsBeforeLoad();
+  MOZ_CAN_RUN_SCRIPT void MaybeFirePendingTranslationsFinished();
+
+  ~L10nMutations();
+  bool IsInRoots(nsINode* aNode);
+};
+
+}  // namespace mozilla::dom
+
+#endif  // mozilla_dom_l10n_L10nMutations_h__
diff --git a/dom/l10n/L10nOverlays.cpp b/dom/l10n/L10nOverlays.cpp
new file mode 100644
index 0000000000..5c3e3b64fa
--- /dev/null
+++ b/dom/l10n/L10nOverlays.cpp
@@ -0,0 +1,556 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "L10nOverlays.h"
+#include "mozilla/dom/Document.h"
+#include "mozilla/dom/DocumentFragment.h"
+#include "mozilla/dom/HTMLInputElement.h"
+#include "HTMLSplitOnSpacesTokenizer.h"
+#include "nsHtml5StringParser.h"
+#include "nsTextNode.h"
+#include "nsIParserUtils.h"
+#include "nsINodeList.h"
+
+using namespace mozilla::dom;
+using namespace mozilla;
+
+/**
+ * Check if attribute is allowed for the given element.
+ *
+ * This method is used by the sanitizer when the translation markup contains DOM
+ * attributes, or when the translation has traits which map to DOM attributes.
+ *
+ * `aExplicitlyAllowed` can be passed as a list of attributes explicitly allowed
+ * on this element.
+ */
+static bool IsAttrNameLocalizable(
+    const nsAtom* aAttrName, Element* aElement,
+    const nsTArray<nsString>& aExplicitlyAllowed) {
+  if (!aExplicitlyAllowed.IsEmpty()) {
+    nsAutoString name;
+    aAttrName->ToString(name);
+    if (aExplicitlyAllowed.Contains(name)) {
+      return true;
+    }
+  }
+
+  nsAtom* elemName = aElement->NodeInfo()->NameAtom();
+  uint32_t nameSpace = aElement->NodeInfo()->NamespaceID();
+
+  if (nameSpace == kNameSpaceID_XHTML) {
+    // Is it a globally safe attribute?
+    if (aAttrName == nsGkAtoms::title || aAttrName == nsGkAtoms::aria_label ||
+        aAttrName == nsGkAtoms::aria_description) {
+      return true;
+    }
+
+    // Is it allowed on this element?
+    if (elemName == nsGkAtoms::a) {
+      return aAttrName == nsGkAtoms::download;
+    }
+    if (elemName == nsGkAtoms::area) {
+      return aAttrName == nsGkAtoms::download || aAttrName == nsGkAtoms::alt;
+    }
+    if (elemName == nsGkAtoms::input) {
+      // Special case for value on HTML inputs with type button, reset, submit
+      if (aAttrName == nsGkAtoms::value) {
+        HTMLInputElement* input = HTMLInputElement::FromNode(aElement);
+        if (input) {
+          auto type = input->ControlType();
+          if (type == FormControlType::InputSubmit ||
+              type == FormControlType::InputButton ||
+              type == FormControlType::InputReset) {
+            return true;
+          }
+        }
+      }
+      return aAttrName == nsGkAtoms::alt || aAttrName == nsGkAtoms::placeholder;
+    }
+    if (elemName == nsGkAtoms::menuitem) {
+      return aAttrName == nsGkAtoms::label;
+    }
+    if (elemName == nsGkAtoms::menu) {
+      return aAttrName == nsGkAtoms::label;
+    }
+    if (elemName == nsGkAtoms::optgroup) {
+      return aAttrName == nsGkAtoms::label;
+    }
+    if (elemName == nsGkAtoms::option) {
+      return aAttrName == nsGkAtoms::label;
+    }
+    if (elemName == nsGkAtoms::track) {
+      return aAttrName == nsGkAtoms::label;
+    }
+    if (elemName == nsGkAtoms::img) {
+      return aAttrName == nsGkAtoms::alt;
+    }
+    if (elemName == nsGkAtoms::textarea) {
+      return aAttrName == nsGkAtoms::placeholder;
+    }
+    if (elemName == nsGkAtoms::th) {
+      return aAttrName == nsGkAtoms::abbr;
+    }
+
+  } else if (nameSpace == kNameSpaceID_XUL) {
+    // Is it a globally safe attribute?
+    if (aAttrName == nsGkAtoms::accesskey ||
+        aAttrName == nsGkAtoms::aria_label || aAttrName == nsGkAtoms::label ||
+        aAttrName == nsGkAtoms::title || aAttrName == nsGkAtoms::tooltiptext) {
+      return true;
+    }
+
+    // Is it allowed on this element?
+    if (elemName == nsGkAtoms::description) {
+      return aAttrName == nsGkAtoms::value;
+    }
+    if (elemName == nsGkAtoms::key) {
+      return aAttrName == nsGkAtoms::key || aAttrName == nsGkAtoms::keycode;
+    }
+    if (elemName == nsGkAtoms::label) {
+      return aAttrName == nsGkAtoms::value;
+    }
+  }
+
+  return false;
+}
+
+already_AddRefed<nsINode> L10nOverlays::CreateTextNodeFromTextContent(
+    Element* aElement, ErrorResult& aRv) {
+  nsAutoString content;
+  aElement->GetTextContent(content, aRv);
+
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+
+  return aElement->OwnerDoc()->CreateTextNode(content);
+}
+
+class AttributeNameValueComparator {
+ public:
+  bool Equals(const AttributeNameValue& aAttribute,
+              const nsAttrName* aAttrName) const {
+    return aAttrName->Equals(NS_ConvertUTF8toUTF16(aAttribute.mName));
+  }
+};
+
+void L10nOverlays::OverlayAttributes(
+    const Nullable<Sequence<AttributeNameValue>>& aTranslation,
+    Element* aToElement, ErrorResult& aRv) {
+  nsTArray<nsString> explicitlyAllowed;
+
+  {
+    nsAutoString l10nAttrs;
+    if (aToElement->GetAttr(nsGkAtoms::datal10nattrs, l10nAttrs)) {
+      HTMLSplitOnSpacesTokenizer tokenizer(l10nAttrs, ',');
+      while (tokenizer.hasMoreTokens()) {
+        const nsAString& token = tokenizer.nextToken();
+        if (!token.IsEmpty() && !explicitlyAllowed.Contains(token)) {
+          explicitlyAllowed.AppendElement(token);
+        }
+      }
+    }
+  }
+
+  uint32_t i = aToElement->GetAttrCount();
+  while (i > 0) {
+    const nsAttrName* attrName = aToElement->GetAttrNameAt(i - 1);
+
+    if (IsAttrNameLocalizable(attrName->LocalName(), aToElement,
+                              explicitlyAllowed) &&
+        (aTranslation.IsNull() ||
+         !aTranslation.Value().Contains(attrName,
+                                        AttributeNameValueComparator()))) {
+      RefPtr<nsAtom> localName = attrName->LocalName();
+      aToElement->UnsetAttr(localName, aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+    }
+    i--;
+  }
+
+  if (aTranslation.IsNull()) {
+    return;
+  }
+
+  for (auto& attribute : aTranslation.Value()) {
+    RefPtr<nsAtom> nameAtom = NS_Atomize(attribute.mName);
+    if (IsAttrNameLocalizable(nameAtom, aToElement, explicitlyAllowed)) {
+      NS_ConvertUTF8toUTF16 value(attribute.mValue);
+      if (!aToElement->AttrValueIs(kNameSpaceID_None, nameAtom, value,
+                                   eCaseMatters)) {
+        aToElement->SetAttr(nameAtom, value, aRv);
+        if (NS_WARN_IF(aRv.Failed())) {
+          return;
+        }
+      }
+    }
+  }
+}
+
+void L10nOverlays::OverlayAttributes(Element* aFromElement, Element* aToElement,
+                                     ErrorResult& aRv) {
+  Nullable<Sequence<AttributeNameValue>> attributes;
+  uint32_t attrCount = aFromElement->GetAttrCount();
+
+  if (attrCount == 0) {
+    attributes.SetNull();
+  } else {
+    Sequence<AttributeNameValue> sequence;
+
+    uint32_t i = 0;
+    while (BorrowedAttrInfo info = aFromElement->GetAttrInfoAt(i++)) {
+      AttributeNameValue* attr = sequence.AppendElement(fallible);
+      MOZ_ASSERT(info.mName->NamespaceEquals(kNameSpaceID_None),
+                 "No namespaced attributes allowed.");
+      info.mName->LocalName()->ToUTF8String(attr->mName);
+
+      nsAutoString value;
+      info.mValue->ToString(value);
+      attr->mValue.Assign(NS_ConvertUTF16toUTF8(value));
+    }
+
+    attributes.SetValue(sequence);
+  }
+
+  return OverlayAttributes(attributes, aToElement, aRv);
+}
+
+void L10nOverlays::ShallowPopulateUsing(Element* aFromElement,
+                                        Element* aToElement, ErrorResult& aRv) {
+  nsAutoString content;
+  aFromElement->GetTextContent(content, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return;
+  }
+
+  aToElement->SetTextContent(content, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return;
+  }
+
+  OverlayAttributes(aFromElement, aToElement, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return;
+  }
+}
+
+already_AddRefed<nsINode> L10nOverlays::GetNodeForNamedElement(
+    Element* aSourceElement, Element* aTranslatedChild,
+    nsTArray<L10nOverlaysError>& aErrors, ErrorResult& aRv) {
+  nsAutoString childName;
+  aTranslatedChild->GetAttr(nsGkAtoms::datal10nname, childName);
+  RefPtr<Element> sourceChild = nullptr;
+
+  nsINodeList* childNodes = aSourceElement->ChildNodes();
+  for (uint32_t i = 0; i < childNodes->Length(); i++) {
+    nsINode* childNode = childNodes->Item(i);
+
+    if (!childNode->IsElement()) {
+      continue;
+    }
+    Element* childElement = childNode->AsElement();
+
+    if (childElement->AttrValueIs(kNameSpaceID_None, nsGkAtoms::datal10nname,
+                                  childName, eCaseMatters)) {
+      sourceChild = childElement;
+      break;
+    }
+  }
+
+  if (!sourceChild) {
+    L10nOverlaysError error;
+    error.mCode.Construct(L10nOverlays_Binding::ERROR_NAMED_ELEMENT_MISSING);
+    error.mL10nName.Construct(childName);
+    aErrors.AppendElement(error);
+    return CreateTextNodeFromTextContent(aTranslatedChild, aRv);
+  }
+
+  nsAtom* sourceChildName = sourceChild->NodeInfo()->NameAtom();
+  nsAtom* translatedChildName = aTranslatedChild->NodeInfo()->NameAtom();
+  if (sourceChildName != translatedChildName &&
+      // Create a specific exception for img vs. image mismatches,
+      // see bug 1543493
+      !(translatedChildName == nsGkAtoms::img &&
+        sourceChildName == nsGkAtoms::image)) {
+    L10nOverlaysError error;
+    error.mCode.Construct(
+        L10nOverlays_Binding::ERROR_NAMED_ELEMENT_TYPE_MISMATCH);
+    error.mL10nName.Construct(childName);
+    error.mTranslatedElementName.Construct(
+        aTranslatedChild->NodeInfo()->LocalName());
+    error.mSourceElementName.Construct(sourceChild->NodeInfo()->LocalName());
+    aErrors.AppendElement(error);
+    return CreateTextNodeFromTextContent(aTranslatedChild, aRv);
+  }
+
+  aSourceElement->RemoveChild(*sourceChild, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+  RefPtr<nsINode> clone = sourceChild->CloneNode(false, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+  ShallowPopulateUsing(aTranslatedChild, clone->AsElement(), aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+  return clone.forget();
+}
+
+bool L10nOverlays::IsElementAllowed(Element* aElement) {
+  uint32_t nameSpace = aElement->NodeInfo()->NamespaceID();
+  if (nameSpace != kNameSpaceID_XHTML) {
+    return false;
+  }
+
+  nsAtom* nameAtom = aElement->NodeInfo()->NameAtom();
+
+  return nameAtom == nsGkAtoms::em || nameAtom == nsGkAtoms::strong ||
+         nameAtom == nsGkAtoms::small || nameAtom == nsGkAtoms::s ||
+         nameAtom == nsGkAtoms::cite || nameAtom == nsGkAtoms::q ||
+         nameAtom == nsGkAtoms::dfn || nameAtom == nsGkAtoms::abbr ||
+         nameAtom == nsGkAtoms::data || nameAtom == nsGkAtoms::time ||
+         nameAtom == nsGkAtoms::code || nameAtom == nsGkAtoms::var ||
+         nameAtom == nsGkAtoms::samp || nameAtom == nsGkAtoms::kbd ||
+         nameAtom == nsGkAtoms::sub || nameAtom == nsGkAtoms::sup ||
+         nameAtom == nsGkAtoms::i || nameAtom == nsGkAtoms::b ||
+         nameAtom == nsGkAtoms::u || nameAtom == nsGkAtoms::mark ||
+         nameAtom == nsGkAtoms::bdi || nameAtom == nsGkAtoms::bdo ||
+         nameAtom == nsGkAtoms::span || nameAtom == nsGkAtoms::br ||
+         nameAtom == nsGkAtoms::wbr;
+}
+
+already_AddRefed<Element> L10nOverlays::CreateSanitizedElement(
+    Element* aElement, ErrorResult& aRv) {
+  // Start with an empty element of the same type to remove nested children
+  // and non-localizable attributes defined by the translation.
+
+  nsAutoString nameSpaceURI;
+  aElement->NodeInfo()->GetNamespaceURI(nameSpaceURI);
+  ElementCreationOptionsOrString options;
+  RefPtr<Element> clone = aElement->OwnerDoc()->CreateElementNS(
+      nameSpaceURI, aElement->NodeInfo()->LocalName(), options, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+
+  ShallowPopulateUsing(aElement, clone, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return nullptr;
+  }
+  return clone.forget();
+}
+
+void L10nOverlays::OverlayChildNodes(DocumentFragment* aFromFragment,
+                                     Element* aToElement,
+                                     nsTArray<L10nOverlaysError>& aErrors,
+                                     ErrorResult& aRv) {
+  nsINodeList* childNodes = aFromFragment->ChildNodes();
+  for (uint32_t i = 0; i < childNodes->Length(); i++) {
+    nsINode* childNode = childNodes->Item(i);
+
+    if (!childNode->IsElement()) {
+      // Keep the translated text node.
+      continue;
+    }
+
+    RefPtr<Element> childElement = childNode->AsElement();
+
+    if (childElement->HasAttr(nsGkAtoms::datal10nname)) {
+      RefPtr<nsINode> sanitized =
+          GetNodeForNamedElement(aToElement, childElement, aErrors, aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+      aFromFragment->ReplaceChild(*sanitized, *childNode, aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+      continue;
+    }
+
+    if (IsElementAllowed(childElement)) {
+      RefPtr<Element> sanitized = CreateSanitizedElement(childElement, aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+      aFromFragment->ReplaceChild(*sanitized, *childNode, aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+      continue;
+    }
+
+    L10nOverlaysError error;
+    error.mCode.Construct(L10nOverlays_Binding::ERROR_FORBIDDEN_TYPE);
+    error.mTranslatedElementName.Construct(
+        childElement->NodeInfo()->LocalName());
+    aErrors.AppendElement(error);
+
+    // If all else fails, replace the element with its text content.
+    RefPtr<nsINode> textNode = CreateTextNodeFromTextContent(childElement, aRv);
+    if (NS_WARN_IF(aRv.Failed())) {
+      return;
+    }
+
+    aFromFragment->ReplaceChild(*textNode, *childNode, aRv);
+    if (NS_WARN_IF(aRv.Failed())) {
+      return;
+    }
+  }
+
+  while (aToElement->HasChildren()) {
+    nsIContent* child = aToElement->GetLastChild();
+#ifdef DEBUG
+    if (child->IsElement()) {
+      if (child->AsElement()->HasAttr(nsGkAtoms::datal10nid)) {
+        L10nOverlaysError error;
+        error.mCode.Construct(
+            L10nOverlays_Binding::ERROR_TRANSLATED_ELEMENT_DISCONNECTED);
+        nsAutoString id;
+        child->AsElement()->GetAttr(nsGkAtoms::datal10nid, id);
+        error.mL10nName.Construct(id);
+        error.mTranslatedElementName.Construct(
+            aToElement->NodeInfo()->LocalName());
+        aErrors.AppendElement(error);
+      } else if (child->AsElement()->ChildElementCount() > 0) {
+        L10nOverlaysError error;
+        error.mCode.Construct(
+            L10nOverlays_Binding::ERROR_TRANSLATED_ELEMENT_DISALLOWED_DOM);
+        nsAutoString id;
+        aToElement->GetAttr(nsGkAtoms::datal10nid, id);
+        error.mL10nName.Construct(id);
+        error.mTranslatedElementName.Construct(
+            aToElement->NodeInfo()->LocalName());
+        aErrors.AppendElement(error);
+      }
+    }
+#endif
+    aToElement->RemoveChildNode(child, true);
+  }
+  aToElement->AppendChild(*aFromFragment, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return;
+  }
+}
+
+void L10nOverlays::TranslateElement(
+    const GlobalObject& aGlobal, Element& aElement,
+    const L10nMessage& aTranslation,
+    Nullable<nsTArray<L10nOverlaysError>>& aErrors) {
+  nsTArray<L10nOverlaysError> errors;
+
+  ErrorResult rv;
+
+  TranslateElement(aElement, aTranslation, errors, rv);
+  if (NS_WARN_IF(rv.Failed())) {
+    L10nOverlaysError error;
+    error.mCode.Construct(L10nOverlays_Binding::ERROR_UNKNOWN);
+    errors.AppendElement(error);
+  }
+  if (!errors.IsEmpty()) {
+    aErrors.SetValue(std::move(errors));
+  }
+}
+
+bool L10nOverlays::ContainsMarkup(const nsACString& aStr) {
+  // We use our custom ContainsMarkup rather than the
+  // one from FragmentOrElement.cpp, because we don't
+  // want to trigger HTML parsing on every `Preferences & Options`
+  // type of string.
+  const char* start = aStr.BeginReading();
+  const char* end = aStr.EndReading();
+
+  while (start != end) {
+    char c = *start;
+    if (c == '<') {
+      return true;
+    }
+    ++start;
+
+    if (c == '&' && start != end) {
+      c = *start;
+      if (c == '#' || (c >= '0' && c <= '9') || (c >= 'a' && c <= 'z') ||
+          (c >= 'A' && c <= 'Z')) {
+        return true;
+      }
+      ++start;
+    }
+  }
+
+  return false;
+}
+
+void L10nOverlays::TranslateElement(Element& aElement,
+                                    const L10nMessage& aTranslation,
+                                    nsTArray<L10nOverlaysError>& aErrors,
+                                    ErrorResult& aRv) {
+  if (!aTranslation.mValue.IsVoid()) {
+    NodeInfo* nodeInfo = aElement.NodeInfo();
+    if (nodeInfo->NameAtom() == nsGkAtoms::title &&
+        nodeInfo->NamespaceID() == kNameSpaceID_XHTML) {
+      // A special case for the HTML title element whose content must be text.
+      aElement.SetTextContent(NS_ConvertUTF8toUTF16(aTranslation.mValue), aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+    } else if (!ContainsMarkup(aTranslation.mValue)) {
+#ifdef DEBUG
+      if (aElement.ChildElementCount() > 0) {
+        L10nOverlaysError error;
+        error.mCode.Construct(
+            L10nOverlays_Binding::ERROR_TRANSLATED_ELEMENT_DISALLOWED_DOM);
+        nsAutoString id;
+        aElement.GetAttr(nsGkAtoms::datal10nid, id);
+        error.mL10nName.Construct(id);
+        error.mTranslatedElementName.Construct(
+            aElement.GetLastElementChild()->NodeInfo()->LocalName());
+        aErrors.AppendElement(error);
+      }
+#endif
+      // If the translation doesn't contain any markup skip the overlay logic.
+      aElement.SetTextContent(NS_ConvertUTF8toUTF16(aTranslation.mValue), aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+    } else {
+      // Else parse the translation's HTML into a DocumentFragment,
+      // sanitize it and replace the element's content.
+      RefPtr<DocumentFragment> fragment =
+          new (aElement.OwnerDoc()->NodeInfoManager())
+              DocumentFragment(aElement.OwnerDoc()->NodeInfoManager());
+      // Note: these flags should be no less restrictive than the ones in
+      // nsContentUtils::ParseFragmentHTML .
+      // We supply the flags here because otherwise the parsing of HTML can
+      // trip DEBUG-only crashes, see bug 1809902 for details.
+      auto sanitizationFlags = nsIParserUtils::SanitizerDropForms |
+                               nsIParserUtils::SanitizerLogRemovals;
+      nsContentUtils::ParseFragmentHTML(
+          NS_ConvertUTF8toUTF16(aTranslation.mValue), fragment,
+          nsGkAtoms::_template, kNameSpaceID_XHTML, false, true,
+          sanitizationFlags);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+
+      OverlayChildNodes(fragment, &aElement, aErrors, aRv);
+      if (NS_WARN_IF(aRv.Failed())) {
+        return;
+      }
+    }
+  }
+
+  // Even if the translation doesn't define any localizable attributes, run
+  // overlayAttributes to remove any localizable attributes set by previous
+  // translations.
+  OverlayAttributes(aTranslation.mAttributes, &aElement, aRv);
+  if (NS_WARN_IF(aRv.Failed())) {
+    return;
+  }
+}
diff --git a/dom/l10n/L10nOverlays.h b/dom/l10n/L10nOverlays.h
new file mode 100644
index 0000000000..95b1714761
--- /dev/null
+++ b/dom/l10n/L10nOverlays.h
@@ -0,0 +1,111 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_dom_l10n_L10nOverlays_h
+#define mozilla_dom_l10n_L10nOverlays_h
+
+#include "mozilla/dom/L10nOverlaysBinding.h"
+#include "mozilla/dom/LocalizationBinding.h"
+
+class nsINode;
+
+namespace mozilla::dom {
+
+class DocumentFragment;
+class Element;
+
+class L10nOverlays {
+ public:
+  /**
+   * Translate an element.
+   *
+   * Translate the element's text content and attributes. Some HTML markup is
+   * allowed in the translation. The element's children with the data-l10n-name
+   * attribute will be treated as arguments to the translation. If the
+   * translation defines the same children, their attributes and text contents
+   * will be used for translating the matching source child.
+   */
+  static void TranslateElement(const GlobalObject& aGlobal, Element& aElement,
+                               const L10nMessage& aTranslation,
+                               Nullable<nsTArray<L10nOverlaysError>>& aErrors);
+  static void TranslateElement(Element& aElement,
+                               const L10nMessage& aTranslation,
+                               nsTArray<L10nOverlaysError>& aErrors,
+                               ErrorResult& aRv);
+
+ private:
+  /**
+   * Create a text node from text content of an Element.
+   */
+  static already_AddRefed<nsINode> CreateTextNodeFromTextContent(
+      Element* aElement, ErrorResult& aRv);
+
+  /**
+   * Transplant localizable attributes of an element to another element.
+   *
+   * Any localizable attributes already set on the target element will be
+   * cleared.
+   */
+  static void OverlayAttributes(
+      const Nullable<Sequence<AttributeNameValue>>& aTranslation,
+      Element* aToElement, ErrorResult& aRv);
+  static void OverlayAttributes(Element* aFromElement, Element* aToElement,
+                                ErrorResult& aRv);
+
+  /**
+   * Helper to set textContent and localizable attributes on an element.
+   */
+  static void ShallowPopulateUsing(Element* aFromElement, Element* aToElement,
+                                   ErrorResult& aRv);
+
+  /**
+   * Sanitize a child element created by the translation.
+   *
+   * Try to find a corresponding child in sourceElement and use it as the base
+   * for the sanitization. This will preserve functional attributes defined on
+   * the child element in the source HTML.
+   */
+  static already_AddRefed<nsINode> GetNodeForNamedElement(
+      Element* aSourceElement, Element* aTranslatedChild,
+      nsTArray<L10nOverlaysError>& aErrors, ErrorResult& aRv);
+
+  /**
+   * Check if element is allowed in the translation.
+   *
+   * This method is used by the sanitizer when the translation markup contains
+   * an element which is not present in the source code.
+   */
+  static bool IsElementAllowed(Element* aElement);
+
+  /**
+   * Sanitize an allowed element.
+   *
+   * Text-level elements allowed in translations may only use safe attributes
+   * and will have any nested markup stripped to text content.
+   */
+  static already_AddRefed<Element> CreateSanitizedElement(Element* aElement,
+                                                          ErrorResult& aRv);
+
+  /**
+   * Replace child nodes of an element with child nodes of another element.
+   *
+   * The contents of the target element will be cleared and fully replaced with
+   * sanitized contents of the source element.
+   */
+  static void OverlayChildNodes(DocumentFragment* aFromFragment,
+                                Element* aToElement,
+                                nsTArray<L10nOverlaysError>& aErrors,
+                                ErrorResult& aRv);
+
+  /**
+   * A helper used to test if the string contains HTML markup.
+   */
+  static bool ContainsMarkup(const nsACString& aStr);
+};
+
+}  // namespace mozilla::dom
+
+#endif
diff --git a/dom/l10n/components.conf b/dom/l10n/components.conf
new file mode 100644
index 0000000000..cbb689e776
--- /dev/null
+++ b/dom/l10n/components.conf
@@ -0,0 +1,14 @@
+Classes = [
+    {
+        'cid': '{a2017fd2-7d8d-11e9-b492-ab187f765b54}',
+        'contract_ids': ['@mozilla.org/dom/l10n/localization;1'],
+        'type': 'mozilla::dom::DOMLocalization',
+        'headers': ['/dom/l10n/DOMLocalization.h'],
+    },
+    {
+        'cid': '{8d85597c-3a92-11e9-9ffc-73d225b2d53f}',
+        'contract_ids': ['@mozilla.org/dom/l10n/overlays;1'],
+        'type': 'mozilla::dom::L10nOverlays',
+        'headers': ['/dom/l10n/L10nOverlays.h'],
+    },
+]
diff --git a/dom/l10n/moz.build b/dom/l10n/moz.build
new file mode 100644
index 0000000000..83f75faf0b
--- /dev/null
+++ b/dom/l10n/moz.build
@@ -0,0 +1,36 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+with Files("**"):
+    BUG_COMPONENT = ("Core", "Internationalization")
+
+EXPORTS.mozilla.dom += [
+    "DocumentL10n.h",
+    "DOMLocalization.h",
+    "L10nMutations.h",
+    "L10nOverlays.h",
+]
+
+UNIFIED_SOURCES += [
+    "DocumentL10n.cpp",
+    "DOMLocalization.cpp",
+    "L10nMutations.cpp",
+    "L10nOverlays.cpp",
+]
+
+LOCAL_INCLUDES += [
+    "/dom/base",
+    "/toolkit/components/jsoncpp/include",
+]
+
+FINAL_LIBRARY = "xul"
+
+MOCHITEST_MANIFESTS += ["tests/mochitest/mochitest.toml"]
+MOCHITEST_CHROME_MANIFESTS += ["tests/mochitest/chrome.toml"]
+BROWSER_CHROME_MANIFESTS += ["tests/mochitest/browser.toml"]
+
+if CONFIG["ENABLE_TESTS"]:
+    DIRS += ["tests/gtest"]
diff --git a/dom/l10n/tests/gtest/TestL10nOverlays.cpp b/dom/l10n/tests/gtest/TestL10nOverlays.cpp
new file mode 100644
index 0000000000..c6c9da9939
--- /dev/null
+++ b/dom/l10n/tests/gtest/TestL10nOverlays.cpp
@@ -0,0 +1,77 @@
+/* -*- Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "gtest/gtest.h"
+#include "mozilla/dom/L10nOverlays.h"
+#include "mozilla/dom/Document.h"
+#include "mozilla/dom/L10nOverlaysBinding.h"
+#include "mozilla/dom/Element.h"
+#include "mozilla/NullPrincipal.h"
+#include "nsNetUtil.h"
+
+using mozilla::NullPrincipal;
+using namespace mozilla::dom;
+
+static already_AddRefed<Document> SetUpDocument() {
+  nsCOMPtr<nsIURI> uri;
+  NS_NewURI(getter_AddRefs(uri), "about:blank");
+  nsCOMPtr<nsIPrincipal> principal =
+      NullPrincipal::CreateWithoutOriginAttributes();
+  nsCOMPtr<Document> document;
+  nsresult rv = NS_NewDOMDocument(getter_AddRefs(document),
+                                  u""_ns,   // aNamespaceURI
+                                  u""_ns,   // aQualifiedName
+                                  nullptr,  // aDoctype
+                                  uri, uri, principal,
+                                  false,    // aLoadedAsData
+                                  nullptr,  // aEventObject
+                                  DocumentFlavorHTML);
+
+  if (NS_WARN_IF(NS_FAILED(rv))) {
+    return nullptr;
+  }
+  return document.forget();
+}
+
+/**
+ * This test verifies that the basic C++ DOM L10nOverlays API
+ * works correctly.
+ */
+TEST(DOM_L10n_Overlays, Initial)
+{
+  mozilla::ErrorResult rv;
+
+  // 1. Set up an HTML document.
+  nsCOMPtr<Document> doc = SetUpDocument();
+
+  // 2. Create a simple Element with a child.
+  //
+  //   <div>
+  //     <a data-l10n-name="link" href="https://www.mozilla.org"></a>
+  //   </div>
+  //
+  RefPtr<Element> elem = doc->CreateHTMLElement(nsGkAtoms::div);
+  RefPtr<Element> span = doc->CreateHTMLElement(nsGkAtoms::a);
+  span->SetAttribute(u"data-l10n-name"_ns, u"link"_ns, rv);
+  span->SetAttribute(u"href"_ns, u"https://www.mozilla.org"_ns, rv);
+  elem->AppendChild(*span, rv);
+
+  // 3. Create an L10nMessage with a translation for the element.
+  L10nMessage translation;
+  translation.mValue.AssignLiteral(
+      "Hello <a data-l10n-name=\"link\">World</a>.");
+
+  // 4. Translate the element.
+  nsTArray<L10nOverlaysError> errors;
+  L10nOverlays::TranslateElement(*elem, translation, errors, rv);
+
+  nsAutoString textContent;
+  elem->GetInnerHTML(textContent, rv);
+
+  // 5. Verify that the innerHTML matches the expectations.
+  ASSERT_STREQ(NS_ConvertUTF16toUTF8(textContent).get(),
+               "Hello <a data-l10n-name=\"link\" "
+               "href=\"https://www.mozilla.org\">World</a>.");
+}
diff --git a/dom/l10n/tests/gtest/moz.build b/dom/l10n/tests/gtest/moz.build
new file mode 100644
index 0000000000..0e1e2173a6
--- /dev/null
+++ b/dom/l10n/tests/gtest/moz.build
@@ -0,0 +1,11 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+UNIFIED_SOURCES += [
+    "TestL10nOverlays.cpp",
+]
+
+FINAL_LIBRARY = "xul-gtest"
diff --git a/dom/l10n/tests/mochitest/browser.toml b/dom/l10n/tests/mochitest/browser.toml
new file mode 100644
index 0000000000..8af24d2917
--- /dev/null
+++ b/dom/l10n/tests/mochitest/browser.toml
@@ -0,0 +1,7 @@
+[DEFAULT]
+
+["document_l10n/non-system-principal/browser_resource_uri.js"]
+support-files = [
+  "document_l10n/non-system-principal/test.html",
+  "document_l10n/non-system-principal/localization/test.ftl",
+]
diff --git a/dom/l10n/tests/mochitest/chrome.toml b/dom/l10n/tests/mochitest/chrome.toml
new file mode 100644
index 0000000000..c31e242f6d
--- /dev/null
+++ b/dom/l10n/tests/mochitest/chrome.toml
@@ -0,0 +1,87 @@
+[DEFAULT]
+
+["document_l10n/test_connectRoot_webcomponent.html"]
+
+["document_l10n/test_connectRoot_webcomponent_lazy.html"]
+
+["document_l10n/test_docl10n.html"]
+
+["document_l10n/test_docl10n.xhtml"]
+
+["document_l10n/test_docl10n_lazy.html"]
+
+["document_l10n/test_docl10n_ready_rejected.html"]
+
+["document_l10n/test_docl10n_removeResourceIds.html"]
+
+["document_l10n/test_docl10n_sync.html"]
+
+["dom_localization/test_attr_sanitized.html"]
+
+["dom_localization/test_connectRoot.html"]
+
+["dom_localization/test_connectRoot_webcomponent.html"]
+
+["dom_localization/test_disconnectRoot.html"]
+
+["dom_localization/test_domloc.xhtml"]
+
+["dom_localization/test_getAttributes.html"]
+
+["dom_localization/test_l10n_args.html"]
+
+["dom_localization/test_l10n_mutations.html"]
+
+["dom_localization/test_overlay.html"]
+
+["dom_localization/test_overlay_missing_all.html"]
+
+["dom_localization/test_overlay_missing_children.html"]
+
+["dom_localization/test_overlay_repeated.html"]
+
+["dom_localization/test_overlay_sanitized.html"]
+
+["dom_localization/test_repeated_l10nid.html"]
+
+["dom_localization/test_setAttributes.html"]
+
+["dom_localization/test_translateElements.html"]
+
+["dom_localization/test_translateFragment.html"]
+
+["dom_localization/test_translateRoots.html"]
+
+["l10n_mutations/test_append_content_post_dcl.html"]
+
+["l10n_mutations/test_append_content_pre_dcl.html"]
+
+["l10n_mutations/test_append_fragment_post_dcl.html"]
+
+["l10n_mutations/test_disconnectedRoot_webcomponent.html"]
+
+["l10n_mutations/test_pause_observing.html"]
+
+["l10n_mutations/test_remove_element.html"]
+
+["l10n_mutations/test_remove_fragment.html"]
+
+["l10n_mutations/test_set_attributes.html"]
+
+["l10n_mutations/test_template.html"]
+
+["l10n_overlays/test_attributes.html"]
+
+["l10n_overlays/test_extra_text_markup.html"]
+
+["l10n_overlays/test_functional_children.html"]
+
+["l10n_overlays/test_l10n_overlays.xhtml"]
+
+["l10n_overlays/test_same_id.html"]
+
+["l10n_overlays/test_same_id_args.html"]
+
+["l10n_overlays/test_text_children.html"]
+
+["l10n_overlays/test_title.html"]
diff --git a/dom/l10n/tests/mochitest/document_l10n/README.txt b/dom/l10n/tests/mochitest/document_l10n/README.txt
new file mode 100644
index 0000000000..b798a5039a
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/README.txt
@@ -0,0 +1,3 @@
+Tests in this directory cover support for DocumentL10n
+WebIDL API across different use cases such as
+processes, principals and so on.
diff --git a/dom/l10n/tests/mochitest/document_l10n/non-system-principal/README.txt b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/README.txt
new file mode 100644
index 0000000000..d0cc074166
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/README.txt
@@ -0,0 +1,3 @@
+Tests in this directory cover the functionality
+of DocumentL10n WebIDL API in non-system-principal
+scenario.
diff --git a/dom/l10n/tests/mochitest/document_l10n/non-system-principal/browser_resource_uri.js b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/browser_resource_uri.js
new file mode 100644
index 0000000000..a658e88bec
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/browser_resource_uri.js
@@ -0,0 +1,109 @@
+let uri =
+  "chrome://mochitests/content/browser/dom/l10n/tests/mochitest//document_l10n/non-system-principal/";
+let protocol = Services.io
+  .getProtocolHandler("resource")
+  .QueryInterface(Ci.nsIResProtocolHandler);
+
+protocol.setSubstitution("l10n-test", Services.io.newURI(uri));
+
+// Since we want the mock source to work with all locales, we're going
+// to register it for currently used locales, and we'll put the path that
+// doesn't use the `{locale}` component to make it work irrelevant of
+// what locale the mochitest is running in.
+//
+// Notice: we're using a `chrome://` protocol here only for convenience reasons.
+// Real sources should use `resource://` protocol.
+let locales = Services.locale.appLocalesAsBCP47;
+
+// This source is actually using a real `FileSource` instead of a mocked one,
+// because we want to test that fetching real I/O out of the `uri` works in non-system-principal.
+let source = new L10nFileSource("test", "app", locales, `${uri}localization/`);
+L10nRegistry.getInstance().registerSources([source]);
+
+registerCleanupFunction(() => {
+  protocol.setSubstitution("l10n-test", null);
+  L10nRegistry.getInstance().removeSources(["test"]);
+  SpecialPowers.pushPrefEnv({
+    set: [["dom.ipc.processPrelaunch.enabled", true]],
+  });
+});
+
+const kChildPage = getRootDirectory(gTestPath) + "test.html";
+
+const kAboutPagesRegistered = Promise.all([
+  BrowserTestUtils.registerAboutPage(
+    registerCleanupFunction,
+    "test-about-l10n-child",
+    kChildPage,
+    Ci.nsIAboutModule.URI_MUST_LOAD_IN_CHILD |
+      Ci.nsIAboutModule.URI_SAFE_FOR_UNTRUSTED_CONTENT |
+      Ci.nsIAboutModule.ALLOW_SCRIPT
+  ),
+]);
+
+add_task(async () => {
+  // Bug 1640333 - windows fails (sometimes) to ever get document.l10n.ready
+  // if e10s process caching is enabled
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["dom.ipc.processPrelaunch.enabled", false],
+      ["dom.security.skip_about_page_has_csp_assert", true],
+    ],
+  });
+  await kAboutPagesRegistered;
+  await BrowserTestUtils.withNewTab(
+    "about:test-about-l10n-child",
+    async browser => {
+      await SpecialPowers.spawn(browser, [], async function () {
+        let document = content.document;
+        let window = document.defaultView;
+
+        await document.testsReadyPromise;
+
+        let principal = SpecialPowers.wrap(document).nodePrincipal;
+        is(
+          principal.spec,
+          "about:test-about-l10n-child",
+          "correct content principal"
+        );
+
+        let desc = document.getElementById("main-desc");
+
+        // We can test here for a particular value because we're
+        // using a mock file source which is locale independent.
+        //
+        // If you're writing a test that verifies that a UI
+        // widget got real localization, you should not rely on
+        // the particular value, but rather on the content not
+        // being empty (to keep the test pass in non-en-US locales).
+        is(desc.textContent, "This is a mock page title");
+
+        // Test for l10n.getAttributes
+        let label = document.getElementById("label1");
+        let l10nArgs = document.l10n.getAttributes(label);
+        is(l10nArgs.id, "subtitle");
+        is(l10nArgs.args.name, "Firefox");
+
+        // Test for manual value formatting
+        let customMsg = document.getElementById("customMessage").textContent;
+        is(customMsg, "This is a custom message formatted from JS.");
+
+        // Since we applied the `data-l10n-id` attribute
+        // on `label` in this microtask, we have to wait for
+        // the next paint to verify that the MutationObserver
+        // applied the translation.
+        await new Promise(resolve => {
+          let verifyL10n = () => {
+            if (!label.textContent.includes("Firefox")) {
+              window.requestAnimationFrame(verifyL10n);
+            } else {
+              resolve();
+            }
+          };
+
+          window.requestAnimationFrame(verifyL10n);
+        });
+      });
+    }
+  );
+});
diff --git a/dom/l10n/tests/mochitest/document_l10n/non-system-principal/localization/test.ftl b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/localization/test.ftl
new file mode 100644
index 0000000000..a5da5a8f00
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/localization/test.ftl
@@ -0,0 +1,4 @@
+page-title = This is a mock page title
+subtitle = This is a label for { $name }
+
+custom-message = This is a custom message formatted from JS.
diff --git a/dom/l10n/tests/mochitest/document_l10n/non-system-principal/test.html b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/test.html
new file mode 100644
index 0000000000..5d91f3da46
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/non-system-principal/test.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DocumentL10n in HTML environment</title>
+  <link rel="localization" href="test.ftl"/>
+  <script type="text/javascript">
+    document.testsReadyPromise = new Promise((resolve) => {
+      // The test is in this file to ensure that we're testing
+      // the behavior in a non-system principal.
+      document.addEventListener("DOMContentLoaded", async () => {
+        await document.l10n.ready;
+
+        // Assign the localization from JS
+        let label = document.getElementById("label1");
+        document.l10n.setAttributes(
+          label,
+          "subtitle",
+          {
+            name: "Firefox",
+          }
+        );
+
+        const customMsg = await document.l10n.formatValue("custom-message");
+        document.getElementById("customMessage").textContent = customMsg;
+        resolve();
+      }, {once: true});
+    });
+  </script>
+</head>
+<body>
+  <h1 id="main-desc" data-l10n-id="page-title"></h1>
+
+  <p id="label1"></p>
+  <p id="customMessage"></p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent.html b/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent.html
new file mode 100644
index 0000000000..3f2def3547
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test Web Component connecting into Document's l10n</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="browser/preferences/preferences.ftl"></link>
+  <script type="application/javascript">
+    SimpleTest.waitForExplicitFinish();
+
+    // In this test we are introducing two widgets. The only difference between them
+    // is that the first one is using `connectRoot` with the `aTranslate` argument set to `true`,
+    // and the other one to `false`.
+    //
+    // In this test, we will inject both of them into the DOM for parsing.
+    // For a test that verifies the behavior when they're injected lazily, see
+    // `test_connectRoot_webcomponent_lazy.html` test.
+    //
+    // Since both widgets get injected into DOM during parsing, we expect both of them
+    // to get translated before `document.l10n.ready` is resolved.
+
+    let passedTests = 0;
+
+    class FluentWidget extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        const t = document.querySelector("#fluent-widget-template");
+        const instance = t.content.cloneNode(true);
+        shadowRoot.appendChild(instance);
+      }
+      async connectedCallback() {
+        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
+
+        document.l10n.connectRoot(this.shadowRoot, true);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        await document.l10n.ready;
+        is(label.textContent, "Learn more", "localization content applied to element");
+        passedTests++;
+        if (passedTests == 2) {
+          SimpleTest.finish();
+        }
+      }
+    }
+
+    class FluentWidget2 extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        const t = document.querySelector("#fluent-widget-template");
+        const instance = t.content.cloneNode(true);
+        shadowRoot.appendChild(instance);
+      }
+      async connectedCallback() {
+        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
+
+        document.l10n.connectRoot(this.shadowRoot, false);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        await document.l10n.ready;
+        is(label.textContent, "Learn more", "localization content applied to element");
+        passedTests++;
+        if (passedTests == 2) {
+          SimpleTest.finish();
+        }
+      }
+    }
+
+    customElements.define("fluent-widget", FluentWidget);
+    customElements.define("fluent-widget2", FluentWidget2);
+  </script>
+</head>
+<body>
+  <template id="fluent-widget-template">
+    <div>
+      <button id="label" data-l10n-id="do-not-track-learn-more"></button>
+    </div>
+  </template>
+  <fluent-widget></fluent-widget>
+  <fluent-widget2></fluent-widget2>
+  <script>
+    // This trick makes sure that we connect the widgets before parsing is completed.
+    document.write("");
+  </script>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent_lazy.html b/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent_lazy.html
new file mode 100644
index 0000000000..b74bbc00c8
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_connectRoot_webcomponent_lazy.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test Web Component connecting into Document's l10n</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+    SimpleTest.waitForExplicitFinish();
+
+    // In this test we are introducing two widgets. The only difference between them
+    // is that the first one is using `connectRoot` with the `aTranslate` argument set to `true`,
+    // and the other one to `false`.
+    //
+    // In this test, we will inject both of them lazily, after initial parsing is completed.
+    // For a test that verifies the behavior when they're injected during parsing, see
+    // `test_connectRoot_webcomponent.html` test.
+    //
+    // The expected difference is that when both get lazily injected into the DOM, the first one
+    // will get translated, while the other will not.
+    // The latter behavior will be used by widgets that will want to translate the initial DOM on their
+    // own before connecting the root.
+
+    let firstWidgetTranslated = false;
+
+    class FluentWidget extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        const t = document.querySelector("#fluent-widget-template");
+        const instance = t.content.cloneNode(true);
+        shadowRoot.appendChild(instance);
+      }
+      connectedCallback() {
+        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
+
+        document.l10n.connectRoot(this.shadowRoot, true);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        let verifyL10n = () => {
+          if (label.textContent.length) {
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            is(label.textContent, "Learn more", "localization content applied to element");
+            firstWidgetTranslated = true;
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+      }
+    }
+
+    class FluentWidget2 extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        const t = document.querySelector("#fluent-widget-template");
+        const instance = t.content.cloneNode(true);
+        shadowRoot.appendChild(instance);
+      }
+      connectedCallback() {
+        MozXULElement.insertFTLIfNeeded("browser/preferences/preferences.ftl");
+
+        document.l10n.connectRoot(this.shadowRoot, false);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        let verifyL10n = () => {
+          if (firstWidgetTranslated) {
+            is(label.textContent.length, 0, "This widget should remain untranslated.");
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            SimpleTest.finish();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+      }
+    }
+
+    customElements.define("fluent-widget", FluentWidget);
+    customElements.define("fluent-widget2", FluentWidget2);
+
+    window.addEventListener("load", () => {
+      window.requestIdleCallback(async () => {
+        let widget = document.createElement("fluent-widget");
+        document.body.appendChild(widget);
+        let widget2 = document.createElement("fluent-widget2");
+        document.body.appendChild(widget2);
+      });
+    }, { once: true });
+  </script>
+</head>
+<body>
+  <template id="fluent-widget-template">
+    <div>
+      <button id="label" data-l10n-id="do-not-track-learn-more"></button>
+    </div>
+  </template>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_docl10n.html b/dom/l10n/tests/mochitest/document_l10n/test_docl10n.html
new file mode 100644
index 0000000000..12ff623f5c
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_docl10n.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DocumentL10n in HTML environment</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script>
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  is(document.l10n.ready && document.l10n.ready.then !== undefined, true,
+    "document.l10n.ready exists and is a Promise");
+
+  (async function() {
+    await document.l10n.ready;
+
+    const desc = document.getElementById("main-desc");
+    is(!!desc.textContent.length, true, "initial localization is applied");
+
+    const msg = await document.l10n.formatValue("id-heading");
+    is(!!msg.length, true, "value is formatted manually");
+
+    const label = document.getElementById("label1");
+    let l10nArgs = document.l10n.getAttributes(label);
+    is(l10nArgs.id, null, "id is null if not set");
+
+    SimpleTest.doesThrow(
+      () => {
+        const bad = {};
+        bad.bad = bad;
+        document.l10n.setAttributes(label, "date-crashed-heading", bad);
+      },
+      "an error is thrown for invalid args",
+    );
+
+    l10nArgs = document.l10n.getAttributes(label);
+    is(l10nArgs.id, null, "id is not set if args are invalid");
+
+    document.l10n.setAttributes(
+      label,
+      "date-crashed-heading",
+      {
+        name: "John",
+      }
+    );
+    ok(document.hasPendingL10nMutations, "Should have pending mutations");
+    l10nArgs = document.l10n.getAttributes(label);
+    is(l10nArgs.id, "date-crashed-heading", "id is set by setAttributes");
+    is(l10nArgs.args.name, "John", "args are set by setAttributes");
+    // Test for mutations applied.
+    document.addEventListener("L10nMutationsFinished", function() {
+      ok(!!label.textContent.length, "Should've applied translation");
+      ok(!document.hasPendingL10nMutations, "Should have no more pending mutations");
+      SimpleTest.finish();
+    }, { once: true });
+  })();
+  </script>
+</head>
+<body>
+  <h1 id="main-desc" data-l10n-id="crash-reports-title"></h1>
+
+  <p id="label1"></p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_docl10n.xhtml b/dom/l10n/tests/mochitest/document_l10n/test_docl10n.xhtml
new file mode 100644
index 0000000000..2d51d8689e
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_docl10n.xhtml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8"></meta>
+  <title>Test DocumentL10n in HTML environment</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"></link>
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    await document.l10n.ready;
+
+    // Test for initial localization applied.
+    let desc = document.getElementById("main-desc");
+    is(!!desc.textContent.length, true);
+
+    // Test for manual value formatting
+    let msg = await document.l10n.formatValue("id-heading");
+    is(!!msg.length, true);
+
+    // Test for mutations applied.
+    let verifyL10n = () => {
+      if (label.textContent.length) {
+        window.removeEventListener("MozAfterPaint", verifyL10n);
+        SimpleTest.finish();
+      }
+    };
+    window.addEventListener("MozAfterPaint", verifyL10n);
+
+    let label = document.getElementById("label1");
+    document.l10n.setAttributes(
+      label,
+      "date-crashed-heading",
+      {
+        name: "John",
+      }
+    );
+
+    // Test for l10n.getAttributes
+    let l10nArgs = document.l10n.getAttributes(label);
+    is(l10nArgs.id, "date-crashed-heading");
+    is(l10nArgs.args.name, "John");
+  }, { once: true});
+  </script>
+</head>
+<body>
+  <h1 id="main-desc" data-l10n-id="crash-reports-title"></h1>
+
+  <p id="label1" />
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_docl10n_lazy.html b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_lazy.html
new file mode 100644
index 0000000000..6c3ddb73ed
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_lazy.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test Lazy DocumentL10n in HTML environment</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  is(document.l10n, null, "document.l10n is null.");
+
+  window.addEventListener("load", async () => {
+    is(document.l10n, null, "document.l10n is null after load.");
+
+    let desc = document.getElementById("main-desc");
+    is(desc.textContent.length, 0, "main-desc is not translated");
+
+    let link = document.createElement("link");
+    link.setAttribute("rel", "localization");
+    link.setAttribute("href", "crashreporter/aboutcrashes.ftl");
+    document.head.appendChild(link);
+
+    // Verify now that `l10n.ready` exists and is fulfilled.
+    await document.l10n.ready;
+
+    // Lazy initialized localization should translate the document.
+    is(!!desc.textContent.length, true, "main-desc is translated");
+
+    document.head.removeChild(link);
+
+    is(document.l10n, null, "document.l10n is null");
+
+    SimpleTest.finish();
+  }, { once: true});
+  </script>
+</head>
+<body>
+  <h1 id="main-desc" data-l10n-id="crash-reports-title"></h1>
+
+  <p id="label1"></p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_docl10n_ready_rejected.html b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_ready_rejected.html
new file mode 100644
index 0000000000..63e18f802c
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_ready_rejected.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test mozIDOMLocalization.ready rejected state</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="path/to_non_existing.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", async function() {
+      /**
+       * Even when we fail to localize all elements, we will
+       * still resolve the `ready` promise to communicate that
+       * the initial translation phase is now completed.
+       */
+      document.l10n.ready.then(() => {
+        is(1, 1, "the ready should resolve");
+        SimpleTest.finish();
+      });
+  });
+  </script>
+</head>
+<body>
+  <h1 data-l10n-id="non-existing-id"></h1>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_docl10n_removeResourceIds.html b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_removeResourceIds.html
new file mode 100644
index 0000000000..8ccaa04614
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_removeResourceIds.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DocumentL10n::RemoveResourceIds</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="toolkit/about/aboutAddons.ftl"/>
+  <link rel="localization" href="toolkit/about/aboutSupport.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  /* eslint-disable mozilla/prefer-formatValues */
+
+  SimpleTest.waitForExplicitFinish();
+
+  window.onload = async function() {
+    {
+      // 1. An example message from aboutAddons should be available.
+      let value = await document.l10n.formatValue("shortcuts-browserAction2");
+      is(!!value.length, true, "localized value retrieved");
+    }
+
+    {
+      // 2. Remove aboutAddons.ftl
+      let link = document.head.querySelector("link[href*=aboutAddons]");
+      document.head.removeChild(link);
+    }
+
+    {
+      // 3. An example message from aboutSupport should still be available.
+      let value = await document.l10n.formatValue("features-version");
+      is(!!value.length, true, "localized value retrieved");
+
+      // 4. An example message from aboutAddons should not be available.
+      await document.l10n.formatValue("shortcuts-browserAction").then(
+      () => {
+        ok(false, "localization should not be available");
+      },
+      () => {
+        ok(true, "localization should not be available");
+      });
+    }
+
+    {
+      // 5. Remove aboutSupport.ftl
+      let link = document.head.querySelector("link[href*=aboutSupport]");
+      document.head.removeChild(link);
+
+      // 6. document.l10n should be null.
+      is(document.l10n, null, "document.l10n should be null");
+
+      SimpleTest.finish();
+    }
+  };
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_docl10n_sync.html b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_sync.html
new file mode 100644
index 0000000000..ea44d1afe1
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_docl10n_sync.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html data-l10n-sync>
+<head>
+  <meta charset="utf-8">
+  <title>Test DocumentL10n in HTML environment</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    await document.l10n.ready;
+
+    // Test for initial localization applied.
+    let desc = document.getElementById("main-desc");
+    is(!!desc.textContent.length, true);
+
+    // Test for manual value formatting.
+    let msg = await document.l10n.formatValue("id-heading");
+    is(!!msg.length, true);
+
+    // Test for mutations applied.
+    let verifyL10n = () => {
+      if (label.textContent.length) {
+        window.removeEventListener("MozAfterPaint", verifyL10n);
+        SimpleTest.finish();
+      }
+    };
+    window.addEventListener("MozAfterPaint", verifyL10n);
+
+    let label = document.getElementById("label1");
+    document.l10n.setAttributes(
+      label,
+      "date-crashed-heading",
+      {
+        name: "John",
+      }
+    );
+
+    // Test for l10n.getAttributes
+    let l10nArgs = document.l10n.getAttributes(label);
+    is(l10nArgs.id, "date-crashed-heading");
+    is(l10nArgs.args.name, "John");
+  }, { once: true});
+  </script>
+</head>
+<body>
+  <h1 id="main-desc" data-l10n-id="crash-reports-title"></h1>
+
+  <p id="label1"></p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/document_l10n/test_unpriv_iframe.html b/dom/l10n/tests/mochitest/document_l10n/test_unpriv_iframe.html
new file mode 100644
index 0000000000..4f4b29c500
--- /dev/null
+++ b/dom/l10n/tests/mochitest/document_l10n/test_unpriv_iframe.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Ensure unprivilaged document cannot access document.l10n in an iframe</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  addLoadEvent(function() {
+    let frame = document.getElementById("frame");
+    let frame2 = document.getElementById("frame2");
+
+    is("l10n" in frame.contentDocument, false);
+    is("l10n" in frame2.contentDocument, false);
+  });
+  addLoadEvent(SimpleTest.finish);
+  </script>
+</head>
+<body>
+  <iframe id="frame" src="about:blank"></iframe>
+  <iframe id="frame2" src="about:crashes"></iframe>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_attr_sanitized.html b/dom/l10n/tests/mochitest/dom_localization/test_attr_sanitized.html
new file mode 100644
index 0000000000..a9244c9891
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_attr_sanitized.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's attr sanitization functionality</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 = Value for Key 1
+
+key2 = Value for <a>Key 2<a/>.
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  SimpleTest.waitForExplicitFinish();
+  addLoadEvent(async () => {
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateFragment(document.body);
+
+    const elem1 = document.querySelector("#elem1");
+    const elem2 = document.querySelector("#elem2");
+
+    ok(elem1.textContent.includes("Value for"));
+    ok(!elem1.hasAttribute("title"));
+
+    ok(elem2.textContent.includes("Value for"));
+    ok(!elem2.hasAttribute("title"));
+
+    SimpleTest.finish();
+  });
+  </script>
+</head>
+<body>
+  <p id="elem1" title="Old Translation" data-l10n-id="key1"></p>
+  <p id="elem2" title="Old Translation" data-l10n-id="key2"></p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_connectRoot.html b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot.html
new file mode 100644
index 0000000000..83b83757f1
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.connectRoot</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 = Value for Key 1
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const p1 = document.getElementById("p1");
+
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateRoots();
+    is(!p1.textContent.length, true);
+    const body = document.body;
+    domLoc.connectRoot(body);
+    await domLoc.translateRoots();
+    is(!!p1.textContent.length, true);
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <p id="p1" data-l10n-id="key1"></p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_connectRoot_webcomponent.html b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot_webcomponent.html
new file mode 100644
index 0000000000..1254bd814f
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_connectRoot_webcomponent.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.connectRoot with Web Components</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+    SimpleTest.waitForExplicitFinish();
+
+    class FluentWidget extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        const t = document.querySelector("#fluent-widget-template");
+        const instance = t.content.cloneNode(true);
+        shadowRoot.appendChild(instance);
+      }
+      connectedCallback() {
+        document.domLoc.connectRoot(this.shadowRoot);
+        ok(true);
+
+        let label = this.shadowRoot.getElementById("label");
+
+        // Test for mutations applied.
+        let verifyL10n = () => {
+          if (label.textContent.length) {
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            // Notice: In normal tests we do not want to test against any particular
+            // value as per https://firefox-source-docs.mozilla.org/l10n/fluent/tutorial.html#testing
+            // But in this particular test, since we do not rely on actual real
+            // localization, but instead we mock it in the test, we can test
+            // against the actual value safely.
+            is(label.textContent, "Value for Key 1", "localization content applied to element");
+            SimpleTest.finish();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+
+        document.domLoc.setAttributes(label, "key1");
+      }
+    }
+    customElements.define("fluent-widget", FluentWidget);
+  </script>
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 = Value for Key 1
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  document.domLoc = new DOMLocalization(
+    ["/mock.ftl"],
+    false,
+    l10nReg,
+    ["en-US"],
+  );
+  </script>
+</head>
+<body>
+  <template id="fluent-widget-template">
+    <div>
+      <p id="label"></p>
+    </div>
+  </template>
+  <fluent-widget id="widget1"></fluent-widget>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_disconnectRoot.html b/dom/l10n/tests/mochitest/dom_localization/test_disconnectRoot.html
new file mode 100644
index 0000000000..fd7344c88e
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_disconnectRoot.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.disconnectRoot</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 = Value for Key 1
+key2 = Value for Key 2
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const p1 = document.getElementById("p1");
+
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateRoots();
+    is(!p1.textContent.length, true);
+
+    const body = document.body;
+
+    domLoc.connectRoot(body);
+    await domLoc.translateRoots();
+    is(p1.textContent.includes("Key 1"), true);
+    is(p1.textContent.includes("Key 2"), false);
+
+    domLoc.disconnectRoot(body);
+    domLoc.setAttributes(p1, "key2");
+    await domLoc.translateRoots();
+    is(p1.textContent.includes("Key 1"), true);
+    is(p1.textContent.includes("Key 2"), false);
+
+    domLoc.connectRoot(body);
+    await domLoc.translateRoots();
+    is(p1.textContent.includes("Key 1"), false);
+    is(p1.textContent.includes("Key 2"), true);
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <p id="p1" data-l10n-id="key1"></p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_domloc.xhtml b/dom/l10n/tests/mochitest/dom_localization/test_domloc.xhtml
new file mode 100644
index 0000000000..a4d4fcc506
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_domloc.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css"
+                 type="text/css"?>
+
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        title="Testing DOMLocalization in XUL environment">
+
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" />
+  <script type="application/javascript">
+  <![CDATA[
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+file-menu =
+    .label = File
+    .accesskey = F
+new-tab =
+    .label = New Tab
+    .accesskey = N
+container = Some text with an <image data-l10n-name="foo"> inside it.
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  SimpleTest.waitForExplicitFinish();
+
+
+  const domLoc = new DOMLocalization(
+    [],
+    false,
+    l10nReg,
+    ["en-US"],
+  );
+
+  async function foo() {
+    domLoc.addResourceIds(["/mock.ftl"]);
+    domLoc.connectRoot(document.documentElement);
+    await domLoc.translateRoots();
+
+    is(document.getElementById('file-menu').getAttribute('label'), 'File');
+    is(document.getElementById('file-menu').getAttribute('accesskey'), 'F');
+
+    is(document.getElementById('new-tab').getAttribute('label'), 'New Tab');
+    is(document.getElementById('new-tab').getAttribute('accesskey'), 'N');
+
+    ok(document.querySelector("image"),
+       "Image should still be present after localization.");
+    SimpleTest.finish();
+  }
+
+  window.onload = foo;
+
+  ]]>
+  </script>
+  <description data-l10n-id="container"><image data-l10n-name="foo"/></description>
+
+  <menubar id="main-menubar">
+    <menu id="file-menu" data-l10n-id="file-menu">
+      <menupopup id="menu_FilePopup">
+        <menuitem id="new-tab" data-l10n-id="new-tab">
+        </menuitem>
+      </menupopup>
+    </menu>
+  </menubar>
+</window>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_getAttributes.html b/dom/l10n/tests/mochitest/dom_localization/test_getAttributes.html
new file mode 100644
index 0000000000..11996d132a
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_getAttributes.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.getAttributes</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+
+  window.onload = function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      [],
+      false,
+    );
+
+    const p1 = document.querySelectorAll("p")[0];
+    const p2 = document.querySelectorAll("p")[1];
+    const p3 = document.querySelectorAll("p")[2];
+    const attrs1 = domLoc.getAttributes(p1);
+    const attrs2 = domLoc.getAttributes(p2);
+    const attrs3 = domLoc.getAttributes(p3);
+    isDeeply(attrs1, {
+      id: null,
+      args: null,
+    });
+    isDeeply(attrs2, {
+      id: "id1",
+      args: null,
+    });
+    isDeeply(attrs3, {
+      id: "id2",
+      args: {
+        userName: "John",
+      },
+    });
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <p />
+  <p data-l10n-id="id1" />
+  <p data-l10n-id="id2" data-l10n-args='{"userName": "John"}' />
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_l10n_args.html b/dom/l10n/tests/mochitest/dom_localization/test_l10n_args.html
new file mode 100644
index 0000000000..4078d32f9e
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_l10n_args.html
@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's data-l10n-args handling</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+test-simple = Hello { $prop }
+test-selector = { $prop ->
+    [true] YES
+   *[other] NO
+  }
+test-error = Hey
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  const tests = [
+    // [data-l10n-id, data-l10n-args, expected text content],
+
+    [`test-simple`, `{ "prop": "str" }`, `Hello str`],
+    [`test-simple`, `{ "prop": 10 }`, `Hello 10`],
+    [`test-simple`, `{ "prop": 10.1 }`, `Hello 10.1`],
+    [`test-simple`, `{ "prop": -2 }`, `Hello -2`],
+    [`test-simple`, `{ "prop": true }`, `Hello true`],
+    [`test-simple`, `{ "prop": false }`, `Hello false`],
+
+    [`test-selector`, `{ "prop": "true" }`, `YES`],
+    [`test-selector`, `{ "prop": "false" }`, `NO`],
+    [`test-selector`, `{ "prop": 10 }`, `NO`],
+    [`test-selector`, `{ "prop": true }`, `YES`],
+    [`test-selector`, `{ "prop": false }`, `NO`],
+
+    // Passing null is also valid as long as the property is not referred.
+    [`test-simple`, `{ "prop": "str", "prop2": null }`, `Hello str`],
+  ];
+
+  const errorTests = [
+    // Unexpected top-level value.
+    `10`,
+    `"foo"`,
+    `true`,
+    `false`,
+    `[]`,
+
+    // Unsupported property value types.
+    `{ "prop": [] }`,
+    `{ "prop": {} }`,
+
+    // Syntax Error.
+    `a`,
+    `"`,
+    `'foo'`,
+    `{ prop: 10 }`,
+    `{ "prop" }`,
+    `{ "prop": }`,
+    `{ "prop": "a }`,
+    `[`,
+    `}`,
+    `{`,
+    `}`,
+    `{ "prop": [ }`,
+    `{ "prop": { }`,
+    `{ "prop": 10, }`,
+  ];
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      [],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    const container = document.querySelector("#test-container");
+
+    domLoc.addResourceIds(["/mock.ftl"]);
+    domLoc.connectRoot(document.body);
+
+    for (const [id, args, expected] of tests) {
+      const span = document.createElement("span");
+      span.setAttribute("data-l10n-id", id);
+      span.setAttribute("data-l10n-args", args);
+      container.append(span);
+
+      await domLoc.translateRoots();
+
+      is(span.textContent, expected, `translation for "${id}" with ${args} should become "${expected}"`);
+
+      span.remove();
+    }
+
+    for (const args of errorTests) {
+      const span = document.createElement("span");
+      span.setAttribute("data-l10n-id", "test-error");
+      span.setAttribute("data-l10n-args", args);
+      container.append(span);
+
+      let thrown = false;
+
+      try {
+        await domLoc.translateRoots();
+      } catch (e) {
+        thrown = true;
+      }
+
+      ok(thrown, `${args} should throw error`);
+
+      span.remove();
+    }
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <div id="test-container">
+  </div>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_l10n_mutations.html b/dom/l10n/tests/mochitest/dom_localization/test_l10n_mutations.html
new file mode 100644
index 0000000000..278baa15dd
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_l10n_mutations.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's MutationObserver</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+title = Hello World
+title2 = Hello Another World
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      [],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    const h1 = document.querySelectorAll("h1")[0];
+
+    domLoc.addResourceIds(["/mock.ftl"]);
+    domLoc.connectRoot(document.body);
+
+    await domLoc.translateRoots();
+
+    is(h1.textContent, "Hello World");
+
+
+    const mo = new MutationObserver(function onMutations(mutations) {
+      is(h1.textContent, "Hello Another World");
+      mo.disconnect();
+      SimpleTest.finish();
+    });
+
+    mo.observe(h1, { childList: true, characterData: true });
+
+    domLoc.setAttributes(h1, "title2");
+  };
+  </script>
+</head>
+<body>
+  <div>
+    <h1 data-l10n-id="title"></h1>
+  </div>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay.html
new file mode 100644
index 0000000000..2c8c219bb2
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's DOMOverlay functionality</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+title = <strong>Hello</strong> World
+title2 = This is <a data-l10n-name="link">a link</a>!
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    const p1 = document.querySelectorAll("p")[0];
+    const p2 = document.querySelectorAll("p")[1];
+    const a = p2.querySelector("a");
+    // We want to test that the event listener persists after
+    // translateFragment().
+    a.addEventListener("click", function(e) {
+      SimpleTest.finish();
+      // We cannot connect to non-local connections on automation, so prevent
+      // the navigation.
+      e.preventDefault();
+    });
+
+    await domLoc.translateFragment(document.body);
+
+
+    is(p1.querySelector("strong").textContent, "Hello");
+
+    is(p2.querySelector("a").getAttribute("href"), "http://www.mozilla.org");
+    is(p2.querySelector("a").textContent, "a link");
+
+    a.click();
+  };
+  </script>
+</head>
+<body>
+  <p data-l10n-id="title" />
+  <p data-l10n-id="title2">
+    <a href="http://www.mozilla.org" data-l10n-name="link"></a>
+  </p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_all.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_all.html
new file mode 100644
index 0000000000..c6f285aa38
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_all.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's DOMOverlay functionality</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+
+  SimpleTest.waitForExplicitFinish();
+  addLoadEvent(async () => {
+    const domLoc = new DOMLocalization(
+      [],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateFragment(document.body).then(() => {
+      ok(false, "Expected translateFragment to throw on missing l10n-id");
+    }, () => {
+      ok(true, "Expected translateFragment to throw on missing l10n-id");
+    });
+    SimpleTest.finish();
+  });
+  </script>
+</head>
+<body>
+  <p data-l10n-id="title">
+    <a href="http://www.mozilla.org"></a>
+    <a href="http://www.firefox.com"></a>
+    <a href="http://www.w3.org"></a>
+  </p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_children.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_children.html
new file mode 100644
index 0000000000..9e4fec1ce2
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_missing_children.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's DOMOverlay functionality</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+title = Visit <a data-l10n-name="mozilla-link">Mozilla</a> or <a data-l10n-name="firefox-link">Firefox</a> website!
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateFragment(document.body);
+
+    const p1 = document.querySelectorAll("p")[0];
+    const linkList = p1.querySelectorAll("a");
+
+
+    is(linkList[0].getAttribute("href"), "http://www.mozilla.org");
+    is(linkList[0].textContent, "Mozilla");
+    is(linkList[1].getAttribute("href"), "http://www.firefox.com");
+    is(linkList[1].textContent, "Firefox");
+
+    is(linkList.length, 2, "There should be exactly two links in the result.");
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <p data-l10n-id="title">
+    <a href="http://www.mozilla.org" data-l10n-name="mozilla-link"></a>
+    <a href="http://www.firefox.com" data-l10n-name="firefox-link"></a>
+    <a href="http://www.w3.org" data-l10n-name="w3-link"></a>
+  </p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_repeated.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_repeated.html
new file mode 100644
index 0000000000..a169c27fa0
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_repeated.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's DOMOverlay functionality</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+title = Visit <a data-l10n-name="mozilla-link">Mozilla</a> or <a data-l10n-name="firefox-link">Firefox</a> website!
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateFragment(document.body);
+
+    const p1 = document.querySelectorAll("p")[0];
+    const linkList = p1.querySelectorAll("a");
+
+
+    is(linkList[0].getAttribute("href"), "http://www.mozilla.org");
+    is(linkList[0].textContent, "Mozilla");
+    is(linkList[1].getAttribute("href"), "http://www.firefox.com");
+    is(linkList[1].textContent, "Firefox");
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <p data-l10n-id="title">
+    <a href="http://www.mozilla.org" data-l10n-name="mozilla-link"></a>
+    <a href="http://www.firefox.com" data-l10n-name="firefox-link"></a>
+  </p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_overlay_sanitized.html b/dom/l10n/tests/mochitest/dom_localization/test_overlay_sanitized.html
new file mode 100644
index 0000000000..fcc201edb6
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_overlay_sanitized.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's DOMOverlay functionality</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 =
+    .href = https://www.hacked.com
+
+key2 =
+    .href = https://pl.wikipedia.org
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  async function test() {
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateFragment(document.body);
+
+    const key1Elem = document.querySelector("[data-l10n-id=key1]");
+    const key2Elem = document.querySelector("[data-l10n-id=key2]");
+
+
+    is(key1Elem.hasAttribute("href"), false, "href translation should not be allowed");
+    is(key2Elem.getAttribute("href"), "https://pl.wikipedia.org",
+      "href translation should be allowed");
+
+    SimpleTest.finish();
+  }
+
+  SimpleTest.waitForExplicitFinish();
+  addLoadEvent(test);
+  </script>
+</head>
+<body>
+  <a data-l10n-id="key1"></a>
+  <a data-l10n-id="key2" data-l10n-attrs="href"></a>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_repeated_l10nid.html b/dom/l10n/tests/mochitest/dom_localization/test_repeated_l10nid.html
new file mode 100644
index 0000000000..64d585f0a0
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_repeated_l10nid.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization's matching l10nIds functionality</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 = Translation For Key 1
+
+key2 = Visit <a data-l10n-name="link">this link<a/>.
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  SimpleTest.waitForExplicitFinish();
+  addLoadEvent(async () => {
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    await domLoc.translateFragment(document.body);
+
+    ok(document.querySelector("#elem1").textContent.includes("Key 1"));
+    ok(document.querySelector("#elem2").textContent.includes("Key 1"));
+
+    const elem3 = document.querySelector("#elem3");
+    const elem4 = document.querySelector("#elem4");
+
+    ok(elem3.textContent.includes("Visit"));
+    is(elem3.querySelector("a").getAttribute("href"), "http://www.mozilla.org");
+
+    ok(elem4.textContent.includes("Visit"));
+    is(elem4.querySelector("a").getAttribute("href"), "http://www.firefox.com");
+
+    SimpleTest.finish();
+  });
+  </script>
+</head>
+<body>
+  <h1 id="elem1" data-l10n-id="key1"></h1>
+  <h2 id="elem2" data-l10n-id="key1"></h2>
+
+  <p id="elem3" data-l10n-id="key2">
+    <a href="http://www.mozilla.org" data-l10n-name="link"></a>
+  </p>
+
+  <p id="elem4" data-l10n-id="key2">
+    <a href="http://www.firefox.com" data-l10n-name="link"></a>
+  </p>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_setAttributes.html b/dom/l10n/tests/mochitest/dom_localization/test_setAttributes.html
new file mode 100644
index 0000000000..508a15dcd3
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_setAttributes.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.setAttributes and DOMLocalization.prototype.setArgs</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+
+  window.onload = function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      [],
+      false,
+      l10nReg,
+    );
+
+    const p1 = document.querySelectorAll("p")[0];
+
+    domLoc.setAttributes(p1, "title");
+    is(
+      p1.getAttribute("data-l10n-id"),
+      "title",
+      "The data-l10n-id can be set by setAttributes."
+    );
+    is(
+      p1.getAttribute("data-l10n-args"),
+      null,
+      "The data-l10n-args is unset."
+    );
+
+
+    domLoc.setAttributes(p1, "title2", {userName: "John"});
+    is(
+      p1.getAttribute("data-l10n-id"),
+      "title2",
+      "The data-l10n-id can be set by setAttributes."
+    );
+    is(
+      p1.getAttribute("data-l10n-args"),
+      JSON.stringify({userName: "John"}),
+      "The data-l10n-args can be set by setAttributes."
+    );
+
+    domLoc.setArgs(p1, {userName: "Jane"});
+    is(
+      p1.getAttribute("data-l10n-id"),
+      "title2",
+      "The data-l10n-id is unchanged by setArgs."
+    );
+    is(
+      p1.getAttribute("data-l10n-args"),
+      JSON.stringify({userName: "Jane"}),
+      "The data-l10n-args can by set by setArgs."
+    );
+
+    domLoc.setArgs(p1);
+    is(
+      p1.getAttribute("data-l10n-id"),
+      "title2",
+      "The data-l10n-id is unchanged by setArgs."
+    );
+    is(
+      p1.getAttribute("data-l10n-args"),
+      null,
+      "The data-l10n-args be unset by setArgs."
+    );
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <p />
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_translateElements.html b/dom/l10n/tests/mochitest/dom_localization/test_translateElements.html
new file mode 100644
index 0000000000..7893309ce4
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_translateElements.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.translateElements</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+title = Hello World
+link =
+    .title = Click me
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    const p1 = document.querySelectorAll("p")[0];
+    const link1 = document.querySelectorAll("a")[0];
+
+    await domLoc.translateElements([p1, link1]);
+
+    is(p1.textContent, "Hello World");
+    is(link1.getAttribute("title"), "Click me");
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <p data-l10n-id="title" />
+  <a data-l10n-id="link" />
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_translateFragment.html b/dom/l10n/tests/mochitest/dom_localization/test_translateFragment.html
new file mode 100644
index 0000000000..c5ccfd996a
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_translateFragment.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.translateFragment</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+title = Hello World
+subtitle = Welcome to FluentBundle
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      ["/mock.ftl"],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    const frag = document.querySelectorAll("div")[0];
+    const h1 = document.querySelectorAll("h1")[0];
+    const p1 = document.querySelectorAll("p")[0];
+
+    await domLoc.translateFragment(frag);
+    is(h1.textContent, "Hello World");
+    is(p1.textContent, "Welcome to FluentBundle");
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <div>
+    <h1 data-l10n-id="title" />
+    <p data-l10n-id="subtitle" />
+  </div>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/dom_localization/test_translateRoots.html b/dom/l10n/tests/mochitest/dom_localization/test_translateRoots.html
new file mode 100644
index 0000000000..58bfb044b0
--- /dev/null
+++ b/dom/l10n/tests/mochitest/dom_localization/test_translateRoots.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.translateRoots</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+title = Hello World
+title2 = Hello Another World
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  window.onload = async function() {
+    SimpleTest.waitForExplicitFinish();
+
+    const domLoc = new DOMLocalization(
+      [],
+      false,
+      l10nReg,
+      ["en-US"],
+    );
+
+    const frag1 = document.querySelectorAll("div")[0];
+    const frag2 = document.querySelectorAll("div")[1];
+    const h1 = document.querySelectorAll("h1")[0];
+    const h2 = document.querySelectorAll("h2")[0];
+
+    domLoc.addResourceIds(["/mock.ftl"]);
+    domLoc.connectRoot(frag1);
+    domLoc.connectRoot(frag2);
+
+    await domLoc.translateRoots();
+
+    is(h1.textContent, "Hello World");
+    is(h2.textContent, "Hello Another World");
+
+    SimpleTest.finish();
+  };
+  </script>
+</head>
+<body>
+  <div>
+    <h1 data-l10n-id="title"></h1>
+  </div>
+  <div>
+    <h2 data-l10n-id="title2"></h2>
+  </div>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_post_dcl.html b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_post_dcl.html
new file mode 100644
index 0000000000..e3a9819728
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_post_dcl.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations for ContentAppended after DOMContentLoaded</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", function() {
+    let elem = document.createElement("div");
+    document.l10n.setAttributes(elem, "crash-reports-title");
+    is(elem.textContent.length, 0);
+    let verifyL10n = () => {
+      if (elem.textContent.length) {
+        window.removeEventListener("MozAfterPaint", verifyL10n);
+        SimpleTest.finish();
+      }
+    };
+    window.addEventListener("MozAfterPaint", verifyL10n);
+    document.body.appendChild(elem);
+  });
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_pre_dcl.html b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_pre_dcl.html
new file mode 100644
index 0000000000..825464e7b8
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_append_content_pre_dcl.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations for ContentAppended before DOMContentLoaded</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+</head>
+<body>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  let elem = document.createElement("div");
+  document.l10n.setAttributes(elem, "crash-reports-title");
+  is(elem.textContent.length, 0);
+  let verifyL10n = () => {
+    if (elem.textContent.length) {
+      window.removeEventListener("MozAfterPaint", verifyL10n);
+      SimpleTest.finish();
+    }
+  };
+  window.addEventListener("MozAfterPaint", verifyL10n);
+  document.body.appendChild(elem);
+  </script>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_append_fragment_post_dcl.html b/dom/l10n/tests/mochitest/l10n_mutations/test_append_fragment_post_dcl.html
new file mode 100644
index 0000000000..8efb3203c6
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_append_fragment_post_dcl.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations for appending a fragment after DOMContentLoaded</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", function() {
+    let frag = document.createDocumentFragment();
+    let elem = document.createElement("div");
+    document.l10n.setAttributes(elem, "crash-reports-title");
+    frag.appendChild(elem);
+
+    let elem2 = document.createElement("div");
+    document.l10n.setAttributes(elem2, "crash-reports-title");
+    frag.appendChild(elem2);
+
+    is(elem.textContent.length, 0);
+    is(elem2.textContent.length, 0);
+
+    let verifyL10n = () => {
+      if (elem.textContent.length && elem2.textContent.length) {
+        window.removeEventListener("MozAfterPaint", verifyL10n);
+        SimpleTest.finish();
+      }
+    };
+    window.addEventListener("MozAfterPaint", verifyL10n);
+    document.body.appendChild(frag);
+  });
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html b/dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html
new file mode 100644
index 0000000000..bb9d9fc24d
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_disconnectedRoot_webcomponent.html
@@ -0,0 +1,148 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test DOMLocalization.prototype.connectRoot with Web Components</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  "use strict";
+  const l10nReg = new L10nRegistry();
+  const fs = [
+    { path: "/localization/en-US/mock.ftl", source: `
+key1 = Key 1
+key2 = Key 2
+key3 = Key 3
+key4 = Key 4
+` },
+  ];
+  const source = L10nFileSource.createMock("test", "app", ["en-US"], "/localization/{locale}", fs);
+  l10nReg.registerSources([source]);
+
+  document.domLoc = new DOMLocalization(
+    ["/mock.ftl"],
+    false,
+    l10nReg,
+    ["en-US"],
+  );
+  document.domLoc.connectRoot(document.documentElement);
+  </script>
+  <script type="application/javascript">
+    // In this test we're going to use two elements - `shadowLabel` and `lightLabel`.
+    // We create a new `DOMLocalization` and connect it to the document's root first.
+    //
+    // Then, we connect and disconnect it on root and element within the shadow DOM and
+    // apply new `data-l10n-id` onto both labels.
+    // Once the `lightLabel` get a new translation, we check what happened to the `shadowLabel`
+    // to ensure that depending on the status of connection between the shadow DOM and the `DOMLocalization`
+    // the `shadowLabel` either gets translated or not.
+
+    SimpleTest.waitForExplicitFinish();
+
+    class FluentWidget extends HTMLElement {
+      constructor() {
+        super();
+        const shadowRoot = this.attachShadow({mode: "open"});
+        const t = document.querySelector("#fluent-widget-template");
+        const instance = t.content.cloneNode(true);
+        shadowRoot.appendChild(instance);
+      }
+      connectedCallback() {
+        this.runTests();
+      }
+      runTests() {
+        // First, let's verify that the mutation will not be applied since
+        // the shadow DOM is not connected to the `DOMLocalization`.
+        let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+        let lightLabel = document.getElementById("lightLabel");
+
+        let verifyL10n = () => {
+          if (lightLabel.textContent == "Key 1") {
+            is(shadowLabel.textContent, "", "document.l10n content not applied to an element in the shadow DOM");
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            this.testPart2();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+
+        document.domLoc.setAttributes(shadowLabel, "key1");
+        document.domLoc.setAttributes(lightLabel, "key1");
+      }
+      testPart2() {
+        // Next, we connect the shadow root to DOMLocalization and the next attribute
+        // change should result in a translation being applied.
+        document.domLoc.connectRoot(this.shadowRoot);
+
+        let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+        let lightLabel = document.getElementById("lightLabel");
+
+        // Test that mutation was applied.
+        let verifyL10n = () => {
+          if (lightLabel.textContent == "Key 2") {
+            is(shadowLabel.textContent, "Key 2", "document.l10n content applied to an element in the shadow DOM");
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            this.testPart3();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+
+        document.domLoc.setAttributes(shadowLabel, "key2");
+        document.domLoc.setAttributes(lightLabel, "key2");
+      }
+      testPart3() {
+        // After we disconnect the shadow root, the mutations should
+        // not be applied onto the `shadowLabel`.
+        document.domLoc.disconnectRoot(this.shadowRoot);
+
+        let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+        let lightLabel = document.getElementById("lightLabel");
+
+        let verifyL10n = () => {
+          if (lightLabel.textContent == "Key 3") {
+            is(shadowLabel.textContent, "Key 2", "document.l10n content not applied to an element in the shadow DOM");
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            this.testPart4();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+
+        document.domLoc.setAttributes(shadowLabel, "key3");
+        document.domLoc.setAttributes(lightLabel, "key3");
+      }
+      testPart4() {
+        // Finally, we'll connect it back, but this time, we'll connect
+        // not the shadow root, but an element within it.
+        // This should still result in the `shadowLabel` receiving a new translation.
+        document.domLoc.connectRoot(this.shadowRoot.getElementById("shadowDiv"));
+
+        let shadowLabel = this.shadowRoot.getElementById("shadowLabel");
+        let lightLabel = document.getElementById("lightLabel");
+
+        // Test that mutation was applied.
+        let verifyL10n = () => {
+          if (lightLabel.textContent == "Key 4") {
+            is(shadowLabel.textContent, "Key 4", "document.l10n content applied to an element in the shadow DOM");
+            window.removeEventListener("MozAfterPaint", verifyL10n);
+            SimpleTest.finish();
+          }
+        };
+        window.addEventListener("MozAfterPaint", verifyL10n);
+
+        document.domLoc.setAttributes(shadowLabel, "key4");
+        document.domLoc.setAttributes(lightLabel, "key4");
+      }
+    }
+    customElements.define("fluent-widget", FluentWidget);
+  </script>
+</head>
+<body>
+  <p id="lightLabel"></p>
+
+  <template id="fluent-widget-template">
+    <div id="shadowDiv">
+      <p id="shadowLabel"></p>
+    </div>
+  </template>
+  <fluent-widget id="widget1"></fluent-widget>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_pause_observing.html b/dom/l10n/tests/mochitest/l10n_mutations/test_pause_observing.html
new file mode 100644
index 0000000000..d225153418
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_pause_observing.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations for Pause/Resume Observing</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", function() {
+    let elem1 = document.createElement("div");
+    let elem2 = document.createElement("div");
+    let elem3 = document.createElement("div");
+    is(elem1.textContent.length, 0);
+    is(elem2.textContent.length, 0);
+    is(elem3.textContent.length, 0);
+
+    document.l10n.setAttributes(elem1, "crash-reports-title");
+    document.l10n.setAttributes(elem2, "crash-reports-title");
+    document.l10n.setAttributes(elem3, "crash-reports-title");
+
+    let verifyL10n = () => {
+      if (elem1.textContent.length &&
+          !elem2.textContent.length &&
+          elem3.textContent.length) {
+        window.removeEventListener("MozAfterPaint", verifyL10n);
+        SimpleTest.finish();
+      }
+    };
+    window.addEventListener("MozAfterPaint", verifyL10n);
+    document.body.appendChild(elem1);
+    document.l10n.pauseObserving();
+    document.body.appendChild(elem2);
+    document.l10n.resumeObserving();
+    document.body.appendChild(elem3);
+  });
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_remove_element.html b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_element.html
new file mode 100644
index 0000000000..347e858d52
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_element.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations for removing element</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    // This element will be added to DOM and expected to be localized.
+    let elem = document.createElement("div");
+
+    // This element will be added to DOM, then immediatelly removed and
+    // expected *not* to be localized.
+    let elem2 = document.createElement("div");
+
+    // This element will be added to DOM, then immediatelly removed and
+    // and then immediatelly re-added, and expected to be localized.
+    let elem3 = document.createElement("div");
+
+    // This element will be added to DOM, then immediatelly removed and
+    // and then re-added later, and expected to be localized.
+    let elem4 = document.createElement("div");
+
+    document.l10n.setAttributes(elem, "crash-reports-title");
+    document.l10n.setAttributes(elem2, "crash-reports-title");
+    document.l10n.setAttributes(elem3, "crash-reports-title");
+    document.l10n.setAttributes(elem4, "crash-reports-title");
+
+    document.body.appendChild(elem);
+    document.body.appendChild(elem2);
+    document.body.appendChild(elem3);
+    document.body.appendChild(elem4);
+
+    is(elem.textContent.length, 0);
+    is(elem2.textContent.length, 0);
+    is(elem3.textContent.length, 0);
+    is(elem4.textContent.length, 0);
+
+    document.body.removeChild(elem2);
+    document.body.removeChild(elem3);
+    document.body.removeChild(elem4);
+
+    document.body.appendChild(elem3);
+
+    // 1. `elem` should be localized since it is in DOM.
+    await SimpleTest.waitForCondition(() => elem.textContent.length);
+    // 2. `elem2` was removed before l10n frame, so it should remain not localized.
+    is(elem2.textContent.length, 0);
+    // 3. `elem3` was added/removed/re-added so it should become localized.
+    await SimpleTest.waitForCondition(() => elem3.textContent.length);
+    // 4. `elem4` was not re-added, so it shouldn't be localized.
+    is(elem4.textContent.length, 0);
+
+    document.body.appendChild(elem4);
+    // 5. Now we re-added `elem4` to DOM so it should get localized.
+    await SimpleTest.waitForCondition(() => elem4.textContent.length);
+    SimpleTest.finish();
+  });
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_remove_fragment.html b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_fragment.html
new file mode 100644
index 0000000000..4f4d0fe1d8
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_remove_fragment.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations for removing fragment</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    let div = document.createElement("div");
+    let div2 = document.createElement("div");
+
+    let elem = document.createElement("p");
+    let elem2 = document.createElement("p");
+    let elem3 = document.createElement("p");
+    let elem4 = document.createElement("p");
+
+    document.l10n.setAttributes(elem, "crash-reports-title");
+    document.l10n.setAttributes(elem2, "crash-reports-title");
+    document.l10n.setAttributes(elem3, "crash-reports-title");
+    document.l10n.setAttributes(elem4, "crash-reports-title");
+
+    div.appendChild(elem);
+    div.appendChild(elem2);
+    div.appendChild(elem3);
+    div.appendChild(elem4);
+
+    document.body.appendChild(div);
+
+    is(elem.textContent.length, 0);
+    is(elem2.textContent.length, 0);
+    is(elem3.textContent.length, 0);
+    is(elem4.textContent.length, 0);
+
+    document.body.removeChild(div);
+
+    div2.appendChild(elem);
+    div2.appendChild(elem3);
+
+    document.body.appendChild(div2);
+
+    // 1. `elem` should be localized since it is in DOM.
+    await SimpleTest.waitForCondition(() => !!elem.textContent.length);
+
+    // 2. `elem2` was removed before l10n frame, so it should remain not localized.
+    is(elem2.textContent.length, 0);
+
+    // 3. `elem3` was added/removed/re-added so it should become localized.
+    await SimpleTest.waitForCondition(() => !!elem3.textContent.length);
+
+    // 4. `elem4` was not re-added, so it shouldn't be localized.
+    is(elem4.textContent.length, 0);
+
+    document.body.appendChild(div);
+    // 5. Now we re-added `elem4` to DOM so it should get localized.
+    await SimpleTest.waitForCondition(() => !!elem4.textContent.length);
+    SimpleTest.finish();
+  });
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_set_attributes.html b/dom/l10n/tests/mochitest/l10n_mutations/test_set_attributes.html
new file mode 100644
index 0000000000..762353a06c
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_set_attributes.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations for AttributeChange after DOMContentLoaded</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <link rel="localization" href="toolkit/about/aboutCompat.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    await document.l10n.ready;
+    let elem = document.getElementById("elem1");
+    let elem2 = document.getElementById("elem2");
+    is(elem.textContent.length, 0);
+    is(elem2.textContent.includes("Initial string"), true);
+    document.l10n.setAttributes(elem, "crash-reports-title");
+    elem2.setAttribute("data-l10n-args", JSON.stringify({bug: "New string"}));
+
+    let verifyL10n = () => {
+      if (elem.textContent.length && elem2.textContent.includes("New string")) {
+        window.removeEventListener("MozAfterPaint", verifyL10n);
+        SimpleTest.finish();
+      }
+    };
+    window.addEventListener("MozAfterPaint", verifyL10n);
+  });
+  </script>
+</head>
+<body>
+  <div id="elem1"></div>
+  <div id="elem2" data-l10n-id="label-more-information" data-l10n-args='{"bug":"Initial string"}'></div>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_mutations/test_template.html b/dom/l10n/tests/mochitest/l10n_mutations/test_template.html
new file mode 100644
index 0000000000..d02ecfcd4d
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_mutations/test_template.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10n Mutations in Template elements</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="crashreporter/aboutcrashes.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  document.addEventListener("DOMContentLoaded", async () => {
+    await document.l10n.ready;
+    let template = document.getElementById("template");
+    let clone = document.importNode(template.content, true);
+    let span = clone.querySelector("span");
+    is(span.textContent.length, 0,
+      "Element has not been translated while in template");
+    document.body.appendChild(clone);
+
+    let verifyL10n = () => {
+      if (span.textContent.length) {
+        window.removeEventListener("MozAfterPaint", verifyL10n);
+        SimpleTest.finish();
+      }
+    };
+    window.addEventListener("MozAfterPaint", verifyL10n);
+  });
+  </script>
+</head>
+<body>
+  <template id="template">
+    <span data-l10n-id="crash-reports-title"></span>
+  </template>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_attributes.html b/dom/l10n/tests/mochitest/l10n_overlays/test_attributes.html
new file mode 100644
index 0000000000..5e588c4847
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_attributes.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10nOverlays Top-level attributes</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  /* global L10nOverlays */
+  "use strict";
+
+  function elem(name) {
+    return function(str) {
+      const element = document.createElement(name);
+      element.innerHTML = str;
+      return element;
+    };
+  }
+
+  const { translateElement } = L10nOverlays;
+
+  {
+    // Allowed attribute
+    const element = elem("div")``;
+    const translation = {
+      value: null,
+      attributes: [
+        {name: "title", value: "FOO"},
+      ],
+    };
+    translateElement(element, translation);
+    is(element.outerHTML, '<div title="FOO"></div>');
+  }
+
+  {
+    // Forbidden attribute
+    const element = elem("input")``;
+    const translation = {
+      value: null,
+      attributes: [
+        {name: "disabled", value: "DISABLED"},
+      ],
+    };
+    translateElement(element, translation);
+    is(element.outerHTML, "<input>");
+  }
+
+  {
+    // Attributes do not leak on first translation
+    const element = elem("div")`Foo`;
+    element.setAttribute("title", "Title");
+
+    const translation = {
+      value: "FOO",
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.outerHTML, "<div>FOO</div>");
+  }
+
+  {
+    // Attributes do not leak on retranslation
+    const element = elem("div")`Foo`;
+
+    const translationA = {
+      value: "FOO A",
+      attributes: [
+        {name: "title", value: "TITLE A"},
+      ],
+    };
+
+    const translationB = {
+      value: "FOO B",
+      attributes: null,
+    };
+    translateElement(element, translationA);
+    is(element.outerHTML, '<div title="TITLE A">FOO A</div>');
+    translateElement(element, translationB);
+    is(element.outerHTML, "<div>FOO B</div>");
+  }
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_extra_text_markup.html b/dom/l10n/tests/mochitest/l10n_overlays/test_extra_text_markup.html
new file mode 100644
index 0000000000..19b6101516
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_extra_text_markup.html
@@ -0,0 +1,135 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10nOverlays Localized text markup</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  /* global L10nOverlays */
+  "use strict";
+
+  function elem(name) {
+    return function(str) {
+      const element = document.createElement(name);
+      element.innerHTML = str;
+      return element;
+    };
+  }
+
+  const { translateElement } = L10nOverlays;
+
+  // Localized text markup
+  {
+    // allowed element
+    const element = elem("div")`Foo`;
+    const translation = {
+      value: "FOO <em>BAR</em> BAZ",
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO <em>BAR</em> BAZ");
+  }
+
+  {
+    // forbidden element
+    const element = elem("div")`Foo`;
+    const translation = {
+      value: 'FOO <img src="img.png" />',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO ");
+  }
+
+  {
+    // forbiden element with text
+    const element = elem("div")`Foo`;
+    const translation = {
+      value: "FOO <a>a</a>",
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO a");
+  }
+
+  {
+    // nested HTML is forbidden
+    const element = elem("div")`Foo`;
+    const translation = {
+      value: "FOO <em><strong>BAR</strong></em> BAZ",
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO <em>BAR</em> BAZ");
+  }
+
+  // Attributes of localized text markup
+  {
+    // allowed attribute
+    const element = elem("div")`Foo Bar`;
+    const translation = {
+      value: 'FOO <em title="BAR">BAR</em>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      'FOO <em title="BAR">BAR</em>');
+  }
+
+  {
+    // forbidden attribute
+    const element = elem("div")`Foo Bar`;
+    const translation = {
+      value: 'FOO <em class="BAR" title="BAR">BAR</em>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      'FOO <em title="BAR">BAR</em>');
+  }
+
+  {
+    // attributes do not leak on first translation
+    const element = elem("div")`
+      <em title="Foo">Foo</a>`;
+    const translation = {
+      value: "<em>FOO</em>",
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      "<em>FOO</em>");
+  }
+
+  {
+    // attributes do not leak on retranslation
+    const element = elem("div")``;
+    const translationA = {
+      value: '<em title="FOO A">FOO A</em>',
+      attributes: null,
+    };
+    const translationB = {
+      value: "<em>FOO B</em>",
+      attributes: null,
+    };
+
+    translateElement(element, translationA);
+    is(element.innerHTML,
+      '<em title="FOO A">FOO A</em>');
+    translateElement(element, translationB);
+    is(element.innerHTML,
+      "<em>FOO B</em>");
+  }
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_functional_children.html b/dom/l10n/tests/mochitest/l10n_overlays/test_functional_children.html
new file mode 100644
index 0000000000..a66f0bd82e
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_functional_children.html
@@ -0,0 +1,343 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10nOverlays functional children test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  /* global L10nOverlays */
+  "use strict";
+
+  function elem(name) {
+    return function(str) {
+      const element = document.createElement(name);
+      element.innerHTML = str;
+      return element;
+    };
+  }
+
+  const { translateElement } = L10nOverlays;
+
+  // Child without name
+  {
+    // in source
+    const element = elem("div")`
+      <a>Foo</a>`;
+    const translation = {
+      value: "FOO",
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO");
+  }
+
+  {
+    // in translation
+    const element = elem("div")`Foo`;
+    const translation = {
+      value: "<a>FOO</a>",
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO");
+  }
+
+  {
+    // in both
+    const element = elem("div")`
+      <a>Foo</a>`;
+    const translation = {
+      value: "<a>FOO</a>",
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO");
+  }
+
+  // Child with name
+  {
+    // in source
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: "<a>FOO</a>",
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO");
+  }
+
+  {
+    // in translation
+    const element = elem("div")`
+      <a>Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo">FOO</a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO");
+  }
+
+  {
+    // in both
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo">FOO</a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, '<a data-l10n-name="foo">FOO</a>');
+  }
+
+  {
+    // translation without text content
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo"></a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, '<a data-l10n-name="foo"></a>');
+  }
+
+  {
+    // different names
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="bar">BAR</a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, "BAR");
+  }
+
+  {
+    // of different types
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: '<div data-l10n-name="foo">FOO</div>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, "FOO");
+  }
+
+  {
+    // used twice
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo">FOO 1</a> <a data-l10n-name="foo">FOO 2</a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, '<a data-l10n-name="foo">FOO 1</a> FOO 2');
+  }
+
+  // Two named children
+  {
+    // in order
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>
+      <a data-l10n-name="bar">Bar</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>');
+  }
+
+  {
+    // out of order
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>
+      <a data-l10n-name="bar">Bar</a>`;
+    const translation = {
+      value: '<a data-l10n-name="bar">BAR</a><a data-l10n-name="foo">FOO</a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(element.innerHTML, '<a data-l10n-name="bar">BAR</a><a data-l10n-name="foo">FOO</a>');
+  }
+
+  {
+    // nested in source
+    const element = elem("div")`
+      <a data-l10n-name="foo">
+        Foo 1
+        <a data-l10n-name="bar">Bar</a>
+        Foo 2
+      </a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(
+      element.innerHTML,
+      '<a data-l10n-name="foo">FOO</a><a data-l10n-name="bar">BAR</a>'
+    );
+  }
+
+  {
+    // nested in translation
+    const element = elem("div")`
+      <div data-l10n-name="foo">Foo</div>
+      <div data-l10n-name="bar">Bar</div>`;
+    const translation = {
+      value: '<div data-l10n-name="foo">FOO 1 <div data-l10n-name="bar">BAR</div> FOO 2</div>',
+      attributes: null,
+    };
+    translateElement(element, translation);
+    is(
+      element.innerHTML,
+      '<div data-l10n-name="foo">FOO 1 BAR FOO 2</div>'
+    );
+  }
+
+  // Child attributes
+  {
+    // functional attribute in source
+    const element = elem("div")`
+      <a data-l10n-name="foo" class="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo" class="foo">FOO</a>');
+  }
+
+  {
+    // functional attribute in translation
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo" class="bar">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo">FOO</a>');
+  }
+
+  {
+    // functional attribute in both
+    const element = elem("div")`
+      <a data-l10n-name="foo" class="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo" class="bar">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo" class="foo">FOO</a>');
+  }
+
+  {
+    // localizable attribute in source
+    const element = elem("div")`
+      <a data-l10n-name="foo" title="Foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo">FOO</a>');
+  }
+
+  {
+    // localizable attribute in translation
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo" title="FOO">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo" title="FOO">FOO</a>');
+  }
+
+  {
+    // localizable attribute in both
+    const element = elem("div")`
+      <a data-l10n-name="foo" title="Foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo" title="BAR">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo" title="BAR">FOO</a>');
+  }
+
+  {
+    // localizable attribute does not leak on retranslation
+    const element = elem("div")`
+      <a data-l10n-name="foo">Foo</a>`;
+    const translationA = {
+      value: '<a data-l10n-name="foo" title="FOO A">FOO A</a>',
+      attributes: null,
+    };
+    const translationB = {
+      value: '<a data-l10n-name="foo">FOO B</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translationA);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo" title="FOO A">FOO A</a>');
+    translateElement(element, translationB);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo">FOO B</a>');
+  }
+
+  // Child attributes overrides
+  {
+    // the source can override child's attributes
+    const element = elem("div")`
+      <a data-l10n-name="foo" data-l10n-attrs="class" class="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo" class="FOO">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo" data-l10n-attrs="class" class="FOO">FOO</a>');
+  }
+
+  {
+    // the translation cannot override child's attributes
+    const element = elem("div")`
+      <a data-l10n-name="foo" class="foo">Foo</a>`;
+    const translation = {
+      value: '<a data-l10n-name="foo" data-l10n-attrs="class" class="FOO">FOO</a>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(element.innerHTML,
+      '<a data-l10n-name="foo" class="foo">FOO</a>');
+  }
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_l10n_overlays.xhtml b/dom/l10n/tests/mochitest/l10n_overlays/test_l10n_overlays.xhtml
new file mode 100644
index 0000000000..5deed81a77
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_l10n_overlays.xhtml
@@ -0,0 +1,86 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css"
+                 type="text/css"?>
+
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        title="Testing DocumentL10n in XUL environment">
+
+  <linkset>
+    <html:link rel="localization" href="toolkit/about/aboutAddons.ftl"/>
+  </linkset>
+
+  <script type="application/javascript"
+          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" />
+  <script type="application/javascript">
+  <![CDATA[
+  /* global L10nOverlays */
+
+  function elem(name) {
+    return function(str) {
+      const element = document.createXULElement(name);
+      element.innerHTML = str;
+      return element;
+    };
+  }
+
+  const { translateElement } = L10nOverlays;
+
+  SimpleTest.waitForExplicitFinish();
+
+  {
+    // Allowed attribute
+    const element = elem("description")``;
+    const translation = {
+      value: null,
+      attributes: [
+        {name: "title", value: "FOO"},
+      ],
+    };
+    translateElement(element, translation);
+    is(element.outerHTML, '<description xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="FOO"/>');
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    {
+      // Handle HTML translation
+      const element = document.getElementById("test2");
+      const translation = {
+      value: "This is <a data-l10n-name=\"link\">a link</a>.",
+        attributes: null,
+      };
+      translateElement(element, translation);
+      is(element.innerHTML, 'This is <html:a xmlns:html="http://www.w3.org/1999/xhtml" data-l10n-name=\"link\" href="https://www.mozilla.org\">a link</html:a>.');
+    }
+
+    {
+      // Don't handle XUL translation
+      //
+      // Current iteration of L10nOverlays will replace
+      // XUL elements from translation with text.
+      //
+      // See bug 1545704 for details.
+      const element = document.getElementById("test3");
+      const translation = {
+      value: "This is <description data-l10n-name=\"desc\">a desc</description>.",
+        attributes: null,
+      };
+      translateElement(element, translation);
+      is(element.innerHTML, 'This is a desc.');
+    }
+    SimpleTest.finish();
+  }, {once: true});
+
+  ]]>
+  </script>
+
+  <description id="test2">
+    <html:a data-l10n-name="link" href="https://www.mozilla.org"/>
+  </description>
+
+  <box id="test3">
+    <description data-l10n-name="desc"/>
+  </box>
+</window>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_same_id.html b/dom/l10n/tests/mochitest/l10n_overlays/test_same_id.html
new file mode 100644
index 0000000000..ecaefbd68d
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_same_id.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test Amount of mutations generated from DOM Overlays</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="toolkit/about/aboutTelemetry.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  let config = {
+    attributes: true,
+    attributeOldValue: true,
+    characterData: true,
+    characterDataOldValue: true,
+    childList: true,
+    subtree: true,
+  };
+  let allMutations = [];
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    await document.l10n.ready;
+
+    let inputElem = document.getElementById("search-input");
+
+    // Test for initial localization applied.
+    is(!!inputElem.getAttribute("placeholder").length, true);
+
+    let observer = new MutationObserver((mutations) => {
+      for (let mutation of mutations) {
+        allMutations.push(mutation);
+      }
+    });
+    observer.observe(inputElem, config);
+
+    document.l10n.setAttributes(inputElem, "about-telemetry-filter-all-placeholder");
+
+    // Due to the async iteractions between nsINode.localize
+    // and DOMLocalization, we'll need to wait two frames
+    // to verify that no mutations happened.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        // Since the l10n-id is the same as the previous one
+        // no mutation should happen in result.
+        is(allMutations.length, 0);
+        SimpleTest.finish();
+      });
+    });
+  }, { once: true});
+  </script>
+</head>
+<body>
+  <input id="search-input" data-l10n-id="about-telemetry-filter-all-placeholder"></input>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_same_id_args.html b/dom/l10n/tests/mochitest/l10n_overlays/test_same_id_args.html
new file mode 100644
index 0000000000..e43c394970
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_same_id_args.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test Amount of mutations generated from DOM Overlays</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="localization" href="toolkit/about/aboutTelemetry.ftl"/>
+  <script type="application/javascript">
+  "use strict";
+  SimpleTest.waitForExplicitFinish();
+
+  let config = {
+    attributes: true,
+    attributeOldValue: true,
+    characterData: true,
+    characterDataOldValue: true,
+    childList: true,
+    subtree: true,
+  };
+  let allMutations = [];
+
+  document.addEventListener("DOMContentLoaded", async function() {
+    await document.l10n.ready;
+
+    let inputElem = document.getElementById("search-input");
+
+    // Test for initial localization applied.
+    is(!!inputElem.getAttribute("placeholder").length, true);
+
+    let observer = new MutationObserver((mutations) => {
+      for (let mutation of mutations) {
+        allMutations.push(mutation);
+      }
+    });
+    observer.observe(inputElem, config);
+
+    document.l10n.setAttributes(inputElem, "about-telemetry-filter-placeholder", {selectedTitle: "Test"});
+
+    // Due to the async iteractions between nsINode.localize
+    // and DOMLocalization, we'll need to wait two frames
+    // to verify that no mutations happened.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        // Since the l10n-id is the same as the previous one
+        // no mutation should happen in result.
+        is(allMutations.length, 0);
+        SimpleTest.finish();
+      });
+    });
+  }, { once: true});
+  </script>
+</head>
+<body>
+  <input id="search-input" data-l10n-id="about-telemetry-filter-placeholder" data-l10n-args='{"selectedTitle":"Test"}'></input>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_text_children.html b/dom/l10n/tests/mochitest/l10n_overlays/test_text_children.html
new file mode 100644
index 0000000000..1fd751a9bf
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_text_children.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10nOverlays Text-semantic argument elements</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  /* global L10nOverlays */
+  "use strict";
+
+  function elem(name) {
+    return function(str) {
+      const element = document.createElement(name);
+      element.innerHTML = str;
+      return element;
+    };
+  }
+
+  const { translateElement } = L10nOverlays;
+
+  {
+    // without data-l10n-name
+    const element = elem("div")`
+      <em class="bar"></em>`;
+    const translation = {
+      value: '<em title="FOO">FOO</em>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(
+      element.innerHTML,
+      '<em title="FOO">FOO</em>'
+    );
+  }
+
+  {
+    // mismatched types
+    const element = elem("div")`
+      <button data-l10n-name="foo"></button>`;
+    const translation = {
+      value: '<em data-l10n-name="foo" title="FOO">FOO</em>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(
+      element.innerHTML,
+      "FOO"
+    );
+  }
+
+  {
+    // types and names mismatch
+    const element = elem("div")`
+      <em data-l10n-name="foo" class="foo"></em>`;
+    const translation = {
+      value: '<em data-l10n-name="foo" title="FOO">FOO</em>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(
+      element.innerHTML,
+      '<em data-l10n-name="foo" class="foo" title="FOO">FOO</em>'
+    );
+  }
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/l10n_overlays/test_title.html b/dom/l10n/tests/mochitest/l10n_overlays/test_title.html
new file mode 100644
index 0000000000..0b7f3f025a
--- /dev/null
+++ b/dom/l10n/tests/mochitest/l10n_overlays/test_title.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test L10nOverlays Special treatment of the title element</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <script type="application/javascript">
+  /* global L10nOverlays */
+  "use strict";
+
+  function elem(name) {
+    return function(str) {
+      const element = document.createElement(name);
+      element.innerHTML = str;
+      return element;
+    };
+  }
+
+  const { translateElement } = L10nOverlays;
+
+  {
+    // Text is fine.
+    const element = elem("title")``;
+    const translation = {
+      value: 'Text',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(
+      element.innerHTML,
+      'Text'
+    );
+  }
+
+  {
+    // Markup is ignored.
+    const element = elem("title")``;
+    const translation = {
+      value: '<em>Markup</em>',
+      attributes: null,
+    };
+
+    translateElement(element, translation);
+    is(
+      element.textContent,
+      '<em>Markup</em>'
+    );
+    is(
+      element.innerHTML,
+      '&lt;em&gt;Markup&lt;/em&gt;'
+    );
+  }
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dom/l10n/tests/mochitest/mochitest.toml b/dom/l10n/tests/mochitest/mochitest.toml
new file mode 100644
index 0000000000..e90215b28d
--- /dev/null
+++ b/dom/l10n/tests/mochitest/mochitest.toml
@@ -0,0 +1,3 @@
+[DEFAULT]
+
+["document_l10n/test_unpriv_iframe.html"]