Adding upstream version 124.0.1.upstream/124.0.1

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

16 files changed, 2401 insertions, 0 deletions

diff --git a/toolkit/components/narrate/.eslintrc.js b/toolkit/components/narrate/.eslintrc.js
new file mode 100644
index 0000000000..bbd5aa34dc
--- /dev/null
+++ b/toolkit/components/narrate/.eslintrc.js
@@ -0,0 +1,25 @@
+/* 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/. */
+
+"use strict";
+
+module.exports = {
+  rules: {
+    "mozilla/no-aArgs": "error",
+    "mozilla/reject-importGlobalProperties": ["error", "everything"],
+    "mozilla/var-only-at-top-level": "error",
+    "block-scoped-var": "error",
+    camelcase: ["error", { properties: "never" }],
+    complexity: ["error", { max: 20 }],
+    "max-nested-callbacks": ["error", 3],
+    "new-cap": ["error", { capIsNew: false }],
+    "no-extend-native": "error",
+    "no-inline-comments": "error",
+    "no-multi-str": "error",
+    "no-return-assign": "error",
+    "no-shadow": "error",
+    strict: ["error", "global"],
+    yoda: "error",
+  },
+};
diff --git a/toolkit/components/narrate/NarrateControls.sys.mjs b/toolkit/components/narrate/NarrateControls.sys.mjs
new file mode 100644
index 0000000000..316d2a0e34
--- /dev/null
+++ b/toolkit/components/narrate/NarrateControls.sys.mjs
@@ -0,0 +1,358 @@
+/* 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/. */
+
+import { AsyncPrefs } from "resource://gre/modules/AsyncPrefs.sys.mjs";
+import { Narrator } from "resource://gre/modules/narrate/Narrator.sys.mjs";
+import { VoiceSelect } from "resource://gre/modules/narrate/VoiceSelect.sys.mjs";
+
+var gStrings = Services.strings.createBundle(
+  "chrome://global/locale/narrate.properties"
+);
+
+export function NarrateControls(win, languagePromise) {
+  this._winRef = Cu.getWeakReference(win);
+  this._languagePromise = languagePromise;
+
+  win.addEventListener("unload", this);
+
+  // Append content style sheet in document head
+  let style = win.document.createElement("link");
+  style.rel = "stylesheet";
+  style.href = "chrome://global/skin/narrate.css";
+  win.document.head.appendChild(style);
+
+  let elemL10nMap = {
+    ".narrate-skip-previous": "back",
+    ".narrate-start-stop": "start-label",
+    ".narrate-skip-next": "forward",
+    ".narrate-rate-input": "speed",
+  };
+
+  let dropdown = win.document.createElement("ul");
+  dropdown.className = "dropdown narrate-dropdown";
+
+  let toggle = win.document.createElement("li");
+  let toggleButton = win.document.createElement("button");
+  toggleButton.className = "dropdown-toggle toolbar-button narrate-toggle";
+  toggleButton.dataset.telemetryId = "reader-listen";
+  let tip = win.document.createElement("span");
+  let shortcutNarrateKey = gStrings.GetStringFromName("narrate-key-shortcut");
+  let labelText = gStrings.formatStringFromName("listen-label", [
+    shortcutNarrateKey,
+  ]);
+  tip.textContent = labelText;
+  tip.className = "hover-label";
+  toggleButton.append(tip);
+  toggleButton.setAttribute("aria-label", labelText);
+  toggleButton.hidden = true;
+  dropdown.appendChild(toggle);
+  toggle.appendChild(toggleButton);
+
+  let dropdownList = win.document.createElement("li");
+  dropdownList.className = "dropdown-popup";
+  dropdown.appendChild(dropdownList);
+
+  let narrateControl = win.document.createElement("div");
+  narrateControl.className = "narrate-row narrate-control";
+  dropdownList.appendChild(narrateControl);
+
+  let narrateRate = win.document.createElement("div");
+  narrateRate.className = "narrate-row narrate-rate";
+  dropdownList.appendChild(narrateRate);
+
+  let narrateVoices = win.document.createElement("div");
+  narrateVoices.className = "narrate-row narrate-voices";
+  dropdownList.appendChild(narrateVoices);
+
+  let dropdownArrow = win.document.createElement("div");
+  dropdownArrow.className = "dropdown-arrow";
+  dropdownList.appendChild(dropdownArrow);
+
+  let narrateSkipPrevious = win.document.createElement("button");
+  narrateSkipPrevious.className = "narrate-skip-previous";
+  narrateSkipPrevious.disabled = true;
+  narrateControl.appendChild(narrateSkipPrevious);
+
+  let narrateStartStop = win.document.createElement("button");
+  narrateStartStop.className = "narrate-start-stop";
+  narrateControl.appendChild(narrateStartStop);
+
+  win.document.addEventListener("keydown", function (event) {
+    if (win.document.hasFocus() && event.key === "n") {
+      narrateStartStop.click();
+    }
+  });
+
+  let narrateSkipNext = win.document.createElement("button");
+  narrateSkipNext.className = "narrate-skip-next";
+  narrateSkipNext.disabled = true;
+  narrateControl.appendChild(narrateSkipNext);
+
+  let narrateRateInput = win.document.createElement("input");
+  narrateRateInput.className = "narrate-rate-input";
+  narrateRateInput.setAttribute("value", "0");
+  narrateRateInput.setAttribute("step", "5");
+  narrateRateInput.setAttribute("max", "100");
+  narrateRateInput.setAttribute("min", "-100");
+  narrateRateInput.setAttribute("type", "range");
+  narrateRate.appendChild(narrateRateInput);
+
+  for (let [selector, stringID] of Object.entries(elemL10nMap)) {
+    if (selector === ".narrate-start-stop") {
+      let shortcut = gStrings.GetStringFromName("narrate-key-shortcut");
+      let label = gStrings.formatStringFromName(stringID, [shortcut]);
+
+      dropdown.querySelector(selector).setAttribute("title", label);
+    } else {
+      dropdown
+        .querySelector(selector)
+        .setAttribute("title", gStrings.GetStringFromName(stringID));
+    }
+  }
+
+  this.narrator = new Narrator(win, languagePromise);
+
+  let branch = Services.prefs.getBranch("narrate.");
+  let selectLabel = gStrings.GetStringFromName("selectvoicelabel");
+  this.voiceSelect = new VoiceSelect(win, selectLabel);
+  this.voiceSelect.element.addEventListener("change", this);
+  this.voiceSelect.element.classList.add("voice-select");
+  win.speechSynthesis.addEventListener("voiceschanged", this);
+  dropdown
+    .querySelector(".narrate-voices")
+    .appendChild(this.voiceSelect.element);
+
+  dropdown.addEventListener("click", this, true);
+
+  let rateRange = dropdown.querySelector(".narrate-rate > input");
+  rateRange.addEventListener("change", this);
+
+  // The rate is stored as an integer.
+  rateRange.value = branch.getIntPref("rate");
+
+  this._setupVoices();
+
+  let tb = win.document.querySelector(".reader-controls");
+  tb.appendChild(dropdown);
+}
+
+NarrateControls.prototype = {
+  handleEvent(evt) {
+    switch (evt.type) {
+      case "change":
+        if (evt.target.classList.contains("narrate-rate-input")) {
+          this._onRateInput(evt);
+        } else {
+          this._onVoiceChange();
+        }
+        break;
+      case "click":
+        this._onButtonClick(evt);
+        break;
+      case "voiceschanged":
+        this._setupVoices();
+        break;
+      case "unload":
+        this.narrator.stop();
+        break;
+    }
+  },
+
+  /**
+   * Returns true if synth voices are available.
+   */
+  _setupVoices() {
+    return this._languagePromise.then(language => {
+      this.voiceSelect.clear();
+      let win = this._win;
+      let voicePrefs = this._getVoicePref();
+      let selectedVoice = voicePrefs[language || "default"];
+      let comparer = new Services.intl.Collator().compare;
+      let filter = !Services.prefs.getBoolPref("narrate.filter-voices");
+      let options = win.speechSynthesis
+        .getVoices()
+        .filter(v => {
+          return filter || !language || v.lang.split("-")[0] == language;
+        })
+        .map(v => {
+          return {
+            label: this._createVoiceLabel(v),
+            value: v.voiceURI,
+            selected: selectedVoice == v.voiceURI,
+          };
+        })
+        .sort((a, b) => comparer(a.label, b.label));
+
+      if (options.length) {
+        options.unshift({
+          label: gStrings.GetStringFromName("defaultvoice"),
+          value: "automatic",
+          selected: selectedVoice == "automatic",
+        });
+        this.voiceSelect.addOptions(options);
+      }
+
+      let narrateToggle = win.document.querySelector(".narrate-toggle");
+      let histogram = Services.telemetry.getKeyedHistogramById(
+        "NARRATE_CONTENT_BY_LANGUAGE_2"
+      );
+      let initial = !this._voicesInitialized;
+      this._voicesInitialized = true;
+
+      // if language is null, re-assign it to "unknown-language"
+      if (language == null) {
+        language = "unknown-language";
+      }
+
+      if (initial) {
+        histogram.add(language, 0);
+      }
+
+      if (options.length && narrateToggle.hidden) {
+        // About to show for the first time..
+        histogram.add(language, 1);
+      }
+
+      // We disable this entire feature if there are no available voices.
+      narrateToggle.hidden = !options.length;
+    });
+  },
+
+  _getVoicePref() {
+    let voicePref = Services.prefs.getCharPref("narrate.voice");
+    try {
+      return JSON.parse(voicePref);
+    } catch (e) {
+      return { default: voicePref };
+    }
+  },
+
+  _onRateInput(evt) {
+    AsyncPrefs.set("narrate.rate", parseInt(evt.target.value, 10));
+    this.narrator.setRate(this._convertRate(evt.target.value));
+  },
+
+  _onVoiceChange() {
+    let voice = this.voice;
+    this.narrator.setVoice(voice);
+    this._languagePromise.then(language => {
+      if (language) {
+        let voicePref = this._getVoicePref();
+        voicePref[language || "default"] = voice;
+        AsyncPrefs.set("narrate.voice", JSON.stringify(voicePref));
+      }
+    });
+  },
+
+  _onButtonClick(evt) {
+    let classList = evt.target.classList;
+    if (classList.contains("narrate-skip-previous")) {
+      this.narrator.skipPrevious();
+    } else if (classList.contains("narrate-skip-next")) {
+      this.narrator.skipNext();
+    } else if (classList.contains("narrate-start-stop")) {
+      if (this.narrator.speaking) {
+        this.narrator.stop();
+      } else {
+        this._updateSpeechControls(true);
+        TelemetryStopwatch.start("NARRATE_CONTENT_SPEAKTIME_MS", this);
+        let options = { rate: this.rate, voice: this.voice };
+        this.narrator
+          .start(options)
+          .catch(err => {
+            console.error("Narrate failed:", err);
+          })
+          .then(() => {
+            this._updateSpeechControls(false);
+            TelemetryStopwatch.finish("NARRATE_CONTENT_SPEAKTIME_MS", this);
+          });
+      }
+    }
+  },
+
+  _updateSpeechControls(speaking) {
+    let dropdown = this._doc.querySelector(".narrate-dropdown");
+    if (!dropdown) {
+      // Elements got destroyed, but window lingers on for a bit.
+      return;
+    }
+
+    dropdown.classList.toggle("keep-open", speaking);
+    dropdown.classList.toggle("speaking", speaking);
+
+    let startStopButton = this._doc.querySelector(".narrate-start-stop");
+    let shortcutId = gStrings.GetStringFromName("narrate-key-shortcut");
+
+    startStopButton.title = gStrings.formatStringFromName(
+      speaking ? "stop-label" : "start-label",
+      [shortcutId]
+    );
+
+    this._doc.querySelector(".narrate-skip-previous").disabled = !speaking;
+    this._doc.querySelector(".narrate-skip-next").disabled = !speaking;
+  },
+
+  _createVoiceLabel(voice) {
+    // This is a highly imperfect method of making human-readable labels
+    // for system voices. Because each platform has a different naming scheme
+    // for voices, we use a different method for each platform.
+    switch (Services.appinfo.OS) {
+      case "WINNT":
+        // On windows the language is included in the name, so just use the name
+        return voice.name;
+      case "Linux":
+        // On Linux, the name is usually the unlocalized language name.
+        // Use a localized language name, and have the language tag in
+        // parenthisis. This is to avoid six languages called "English".
+        return gStrings.formatStringFromName("voiceLabel", [
+          this._getLanguageName(voice.lang) || voice.name,
+          voice.lang,
+        ]);
+      default:
+        // On Mac the language is not included in the name, find a localized
+        // language name or show the tag if none exists.
+        // This is the ideal naming scheme so it is also the "default".
+        return gStrings.formatStringFromName("voiceLabel", [
+          voice.name,
+          this._getLanguageName(voice.lang) || voice.lang,
+        ]);
+    }
+  },
+
+  _getLanguageName(lang) {
+    try {
+      // This may throw if the lang can't be parsed.
+      let langCode = new Services.intl.Locale(lang).language;
+
+      return Services.intl.getLanguageDisplayNames(undefined, [langCode]);
+    } catch {
+      return "";
+    }
+  },
+
+  _convertRate(rate) {
+    // We need to convert a relative percentage value to a fraction rate value.
+    // eg. -100 is half the speed, 100 is twice the speed in percentage,
+    // 0.5 is half the speed and 2 is twice the speed in fractions.
+    return Math.pow(Math.abs(rate / 100) + 1, rate < 0 ? -1 : 1);
+  },
+
+  get _win() {
+    return this._winRef.get();
+  },
+
+  get _doc() {
+    return this._win.document;
+  },
+
+  get rate() {
+    return this._convertRate(
+      this._doc.querySelector(".narrate-rate-input").value
+    );
+  },
+
+  get voice() {
+    return this.voiceSelect.value;
+  },
+};
diff --git a/toolkit/components/narrate/Narrator.sys.mjs b/toolkit/components/narrate/Narrator.sys.mjs
new file mode 100644
index 0000000000..15b3e841bc
--- /dev/null
+++ b/toolkit/components/narrate/Narrator.sys.mjs
@@ -0,0 +1,456 @@
+/* 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/. */
+
+// Maximum time into paragraph when pressing "skip previous" will go
+// to previous paragraph and not the start of current one.
+const PREV_THRESHOLD = 2000;
+// All text-related style rules that we should copy over to the highlight node.
+const kTextStylesRules = [
+  "font-family",
+  "font-kerning",
+  "font-size",
+  "font-size-adjust",
+  "font-stretch",
+  "font-variant",
+  "font-weight",
+  "line-height",
+  "letter-spacing",
+  "text-orientation",
+  "text-transform",
+  "word-spacing",
+];
+
+export function Narrator(win, languagePromise) {
+  this._winRef = Cu.getWeakReference(win);
+  this._languagePromise = languagePromise;
+  this._inTest = Services.prefs.getBoolPref("narrate.test");
+  this._speechOptions = {};
+  this._startTime = 0;
+  this._stopped = false;
+}
+
+Narrator.prototype = {
+  get _doc() {
+    return this._winRef.get().document;
+  },
+
+  get _win() {
+    return this._winRef.get();
+  },
+
+  get _treeWalker() {
+    if (!this._treeWalkerRef) {
+      let wu = this._win.windowUtils;
+      let nf = this._win.NodeFilter;
+
+      let filter = {
+        _matches: new Set(),
+
+        // We want high-level elements that have non-empty text nodes.
+        // For example, paragraphs. But nested anchors and other elements
+        // are not interesting since their text already appears in their
+        // parent's textContent.
+        acceptNode(node) {
+          if (this._matches.has(node.parentNode)) {
+            // Reject sub-trees of accepted nodes.
+            return nf.FILTER_REJECT;
+          }
+
+          if (!/\S/.test(node.textContent)) {
+            // Reject nodes with no text.
+            return nf.FILTER_REJECT;
+          }
+
+          let bb = wu.getBoundsWithoutFlushing(node);
+          if (!bb.width || !bb.height) {
+            // Skip non-rendered nodes. We don't reject because a zero-sized
+            // container can still have visible, "overflowed", content.
+            return nf.FILTER_SKIP;
+          }
+
+          for (let c = node.firstChild; c; c = c.nextSibling) {
+            if (c.nodeType == c.TEXT_NODE && /\S/.test(c.textContent)) {
+              // If node has a non-empty text child accept it.
+              this._matches.add(node);
+              return nf.FILTER_ACCEPT;
+            }
+          }
+
+          return nf.FILTER_SKIP;
+        },
+      };
+
+      this._treeWalkerRef = new WeakMap();
+
+      // We can't hold a weak reference on the treewalker, because there
+      // are no other strong references, and it will be GC'ed. Instead,
+      // we rely on the window's lifetime and use it as a weak reference.
+      this._treeWalkerRef.set(
+        this._win,
+        this._doc.createTreeWalker(
+          this._doc.querySelector(".container"),
+          nf.SHOW_ELEMENT,
+          filter,
+          false
+        )
+      );
+    }
+
+    return this._treeWalkerRef.get(this._win);
+  },
+
+  get _timeIntoParagraph() {
+    let rv = Date.now() - this._startTime;
+    return rv;
+  },
+
+  get speaking() {
+    return (
+      this._win.speechSynthesis.speaking || this._win.speechSynthesis.pending
+    );
+  },
+
+  _getVoice(voiceURI) {
+    if (!this._voiceMap || !this._voiceMap.has(voiceURI)) {
+      this._voiceMap = new Map(
+        this._win.speechSynthesis.getVoices().map(v => [v.voiceURI, v])
+      );
+    }
+
+    return this._voiceMap.get(voiceURI);
+  },
+
+  _isParagraphInView(paragraph) {
+    if (!paragraph) {
+      return false;
+    }
+
+    let bb = paragraph.getBoundingClientRect();
+    return bb.top >= 0 && bb.top < this._win.innerHeight;
+  },
+
+  _sendTestEvent(eventType, detail) {
+    let win = this._win;
+    win.dispatchEvent(
+      new win.CustomEvent(eventType, {
+        detail: Cu.cloneInto(detail, win.document),
+      })
+    );
+  },
+
+  _speakInner() {
+    this._win.speechSynthesis.cancel();
+    let tw = this._treeWalker;
+    let paragraph = tw.currentNode;
+    if (paragraph == tw.root) {
+      this._sendTestEvent("paragraphsdone", {});
+      return Promise.resolve();
+    }
+
+    let utterance = new this._win.SpeechSynthesisUtterance(
+      paragraph.textContent.replace(/\r?\n/g, " ")
+    );
+    utterance.rate = this._speechOptions.rate;
+    if (this._speechOptions.voice) {
+      utterance.voice = this._speechOptions.voice;
+    } else {
+      utterance.lang = this._speechOptions.lang;
+    }
+
+    this._startTime = Date.now();
+
+    let highlighter = new Highlighter(paragraph);
+
+    if (this._inTest) {
+      let onTestSynthEvent = e => {
+        if (e.detail.type == "boundary") {
+          let args = Object.assign({ utterance }, e.detail.args);
+          let evt = new this._win.SpeechSynthesisEvent(e.detail.type, args);
+          utterance.dispatchEvent(evt);
+        }
+      };
+
+      let removeListeners = () => {
+        this._win.removeEventListener("testsynthevent", onTestSynthEvent);
+      };
+
+      this._win.addEventListener("testsynthevent", onTestSynthEvent);
+      utterance.addEventListener("end", removeListeners);
+      utterance.addEventListener("error", removeListeners);
+    }
+
+    return new Promise((resolve, reject) => {
+      utterance.addEventListener("start", () => {
+        paragraph.classList.add("narrating");
+        let bb = paragraph.getBoundingClientRect();
+        if (bb.top < 0 || bb.bottom > this._win.innerHeight) {
+          paragraph.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+
+        if (this._inTest) {
+          this._sendTestEvent("paragraphstart", {
+            voice: utterance.chosenVoiceURI,
+            rate: utterance.rate,
+            paragraph: paragraph.textContent,
+            tag: paragraph.localName,
+          });
+        }
+      });
+
+      utterance.addEventListener("end", () => {
+        if (!this._win) {
+          // page got unloaded, don't do anything.
+          return;
+        }
+
+        highlighter.remove();
+        paragraph.classList.remove("narrating");
+        this._startTime = 0;
+        if (this._inTest) {
+          this._sendTestEvent("paragraphend", {});
+        }
+
+        if (this._stopped) {
+          // User pressed stopped.
+          resolve();
+        } else {
+          tw.currentNode = tw.nextNode() || tw.root;
+          this._speakInner().then(resolve, reject);
+        }
+      });
+
+      utterance.addEventListener("error", () => {
+        reject("speech synthesis failed");
+      });
+
+      utterance.addEventListener("boundary", e => {
+        if (e.name != "word") {
+          // We are only interested in word boundaries for now.
+          return;
+        }
+
+        if (e.charLength) {
+          highlighter.highlight(e.charIndex, e.charLength);
+          if (this._inTest) {
+            this._sendTestEvent("wordhighlight", {
+              start: e.charIndex,
+              end: e.charIndex + e.charLength,
+            });
+          }
+        }
+      });
+
+      this._win.speechSynthesis.speak(utterance);
+    });
+  },
+
+  start(speechOptions) {
+    this._speechOptions = {
+      rate: speechOptions.rate,
+      voice: this._getVoice(speechOptions.voice),
+    };
+
+    this._stopped = false;
+    return this._languagePromise.then(language => {
+      if (!this._speechOptions.voice) {
+        this._speechOptions.lang = language;
+      }
+
+      let tw = this._treeWalker;
+      if (!this._isParagraphInView(tw.currentNode)) {
+        tw.currentNode = tw.root;
+        while (tw.nextNode()) {
+          if (this._isParagraphInView(tw.currentNode)) {
+            break;
+          }
+        }
+      }
+      if (tw.currentNode == tw.root) {
+        tw.nextNode();
+      }
+
+      return this._speakInner();
+    });
+  },
+
+  stop() {
+    this._stopped = true;
+    this._win.speechSynthesis.cancel();
+  },
+
+  skipNext() {
+    this._win.speechSynthesis.cancel();
+  },
+
+  skipPrevious() {
+    this._goBackParagraphs(this._timeIntoParagraph < PREV_THRESHOLD ? 2 : 1);
+  },
+
+  setRate(rate) {
+    this._speechOptions.rate = rate;
+    /* repeat current paragraph */
+    this._goBackParagraphs(1);
+  },
+
+  setVoice(voice) {
+    this._speechOptions.voice = this._getVoice(voice);
+    /* repeat current paragraph */
+    this._goBackParagraphs(1);
+  },
+
+  _goBackParagraphs(count) {
+    let tw = this._treeWalker;
+    for (let i = 0; i < count; i++) {
+      if (!tw.previousNode()) {
+        tw.currentNode = tw.root;
+      }
+    }
+    this._win.speechSynthesis.cancel();
+  },
+};
+
+/**
+ * The Highlighter class is used to highlight a range of text in a container.
+ *
+ * @param {Element} container a text container
+ */
+function Highlighter(container) {
+  this.container = container;
+}
+
+Highlighter.prototype = {
+  /**
+   * Highlight the range within offsets relative to the container.
+   *
+   * @param {number} startOffset the start offset
+   * @param {number} length the length in characters of the range
+   */
+  highlight(startOffset, length) {
+    let containerRect = this.container.getBoundingClientRect();
+    let range = this._getRange(startOffset, startOffset + length);
+    let rangeRects = range.getClientRects();
+    let win = this.container.ownerGlobal;
+    let computedStyle = win.getComputedStyle(range.endContainer.parentNode);
+    let nodes = this._getFreshHighlightNodes(rangeRects.length);
+
+    let textStyle = {};
+    for (let textStyleRule of kTextStylesRules) {
+      textStyle[textStyleRule] = computedStyle[textStyleRule];
+    }
+
+    for (let i = 0; i < rangeRects.length; i++) {
+      let r = rangeRects[i];
+      let node = nodes[i];
+
+      let style = Object.assign(
+        {
+          top: `${r.top - containerRect.top + r.height / 2}px`,
+          left: `${r.left - containerRect.left + r.width / 2}px`,
+          width: `${r.width}px`,
+          height: `${r.height}px`,
+        },
+        textStyle
+      );
+
+      // Enables us to vary the CSS transition on a line change.
+      node.classList.toggle("newline", style.top != node.dataset.top);
+      node.dataset.top = style.top;
+
+      // Enables CSS animations.
+      node.classList.remove("animate");
+      win.requestAnimationFrame(() => {
+        node.classList.add("animate");
+      });
+
+      // Enables alternative word display with a CSS pseudo-element.
+      node.dataset.word = range.toString();
+
+      // Apply style
+      node.style = Object.entries(style)
+        .map(s => `${s[0]}: ${s[1]};`)
+        .join(" ");
+    }
+  },
+
+  /**
+   * Releases reference to container and removes all highlight nodes.
+   */
+  remove() {
+    for (let node of this._nodes) {
+      node.remove();
+    }
+
+    this.container = null;
+  },
+
+  /**
+   * Returns specified amount of highlight nodes. Creates new ones if necessary
+   * and purges any additional nodes that are not needed.
+   *
+   * @param {number} count number of nodes needed
+   */
+  _getFreshHighlightNodes(count) {
+    let doc = this.container.ownerDocument;
+    let nodes = Array.from(this._nodes);
+
+    // Remove nodes we don't need anymore (nodes.length - count > 0).
+    for (let toRemove = 0; toRemove < nodes.length - count; toRemove++) {
+      nodes.shift().remove();
+    }
+
+    // Add additional nodes if we need them (count - nodes.length > 0).
+    for (let toAdd = 0; toAdd < count - nodes.length; toAdd++) {
+      let node = doc.createElement("div");
+      node.className = "narrate-word-highlight";
+      this.container.appendChild(node);
+      nodes.push(node);
+    }
+
+    return nodes;
+  },
+
+  /**
+   * Create and return a range object with the start and end offsets relative
+   * to the container node.
+   *
+   * @param {number} startOffset the start offset
+   * @param {number} endOffset the end offset
+   */
+  _getRange(startOffset, endOffset) {
+    let doc = this.container.ownerDocument;
+    let i = 0;
+    let treeWalker = doc.createTreeWalker(
+      this.container,
+      doc.defaultView.NodeFilter.SHOW_TEXT
+    );
+    let node = treeWalker.nextNode();
+
+    function _findNodeAndOffset(offset) {
+      do {
+        let length = node.data.length;
+        if (offset >= i && offset <= i + length) {
+          return [node, offset - i];
+        }
+        i += length;
+      } while ((node = treeWalker.nextNode()));
+
+      // Offset is out of bounds, return last offset of last node.
+      node = treeWalker.lastChild();
+      return [node, node.data.length];
+    }
+
+    let range = doc.createRange();
+    range.setStart(..._findNodeAndOffset(startOffset));
+    range.setEnd(..._findNodeAndOffset(endOffset));
+
+    return range;
+  },
+
+  /*
+   * Get all existing highlight nodes for container.
+   */
+  get _nodes() {
+    return this.container.querySelectorAll(".narrate-word-highlight");
+  },
+};
diff --git a/toolkit/components/narrate/VoiceSelect.sys.mjs b/toolkit/components/narrate/VoiceSelect.sys.mjs
new file mode 100644
index 0000000000..06def29ef0
--- /dev/null
+++ b/toolkit/components/narrate/VoiceSelect.sys.mjs
@@ -0,0 +1,294 @@
+/* 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/. */
+
+export function VoiceSelect(win, label) {
+  this._winRef = Cu.getWeakReference(win);
+
+  let element = win.document.createElement("div");
+  element.classList.add("voiceselect");
+  // eslint-disable-next-line no-unsanitized/property
+  element.innerHTML = `<button class="select-toggle" aria-controls="voice-options">
+      <span class="label">${label}</span> <span class="current-voice"></span>
+    </button>
+    <div class="options" id="voice-options" role="listbox"></div>`;
+
+  this._elementRef = Cu.getWeakReference(element);
+
+  let button = this.selectToggle;
+  button.addEventListener("click", this);
+  button.addEventListener("keydown", this);
+
+  let listbox = this.listbox;
+  listbox.addEventListener("click", this);
+  listbox.addEventListener("mousemove", this);
+  listbox.addEventListener("keydown", this);
+  listbox.addEventListener("wheel", this, true);
+
+  win.addEventListener("resize", () => {
+    this._updateDropdownHeight();
+  });
+}
+
+VoiceSelect.prototype = {
+  add(label, value) {
+    let option = this._doc.createElement("button");
+    option.dataset.value = value;
+    option.classList.add("option");
+    option.tabIndex = "-1";
+    option.setAttribute("role", "option");
+    option.textContent = label;
+    this.listbox.appendChild(option);
+    return option;
+  },
+
+  addOptions(options) {
+    let selected = null;
+    for (let option of options) {
+      if (option.selected) {
+        selected = this.add(option.label, option.value);
+      } else {
+        this.add(option.label, option.value);
+      }
+    }
+
+    this._select(selected || this.options[0], true);
+  },
+
+  clear() {
+    this.listbox.innerHTML = "";
+  },
+
+  toggleList(force, focus = true) {
+    if (this.element.classList.toggle("open", force)) {
+      if (focus) {
+        (this.selected || this.options[0]).focus();
+      }
+
+      this._updateDropdownHeight(true);
+      this.listbox.setAttribute("aria-expanded", true);
+      this._win.addEventListener("focus", this, true);
+    } else {
+      if (focus) {
+        this.element.querySelector(".select-toggle").focus();
+      }
+
+      this.listbox.setAttribute("aria-expanded", false);
+      this._win.removeEventListener("focus", this, true);
+    }
+  },
+
+  handleEvent(evt) {
+    let target = evt.target;
+
+    switch (evt.type) {
+      case "click":
+        target = target.closest(".option, .select-toggle") || target;
+        if (target.classList.contains("option")) {
+          if (!target.classList.contains("selected")) {
+            this.selected = target;
+          }
+
+          this.toggleList(false);
+        } else if (target.classList.contains("select-toggle")) {
+          this.toggleList();
+        }
+        break;
+
+      case "mousemove":
+        this.listbox.classList.add("hovering");
+        break;
+
+      case "keydown":
+        if (target.classList.contains("select-toggle")) {
+          if (evt.altKey) {
+            this.toggleList(true);
+          } else {
+            this._keyDownedButton(evt);
+          }
+        } else {
+          this.listbox.classList.remove("hovering");
+          this._keyDownedInBox(evt);
+        }
+        break;
+
+      case "wheel":
+        // Don't let wheel events bubble to document. It will scroll the page
+        // and close the entire narrate dialog.
+        evt.stopPropagation();
+        break;
+
+      case "focus":
+        if (!target.closest(".voiceselect")) {
+          this.toggleList(false, false);
+        }
+        break;
+    }
+  },
+
+  _getPagedOption(option, up) {
+    let height = elem => elem.getBoundingClientRect().height;
+    let listboxHeight = height(this.listbox);
+
+    let next = option;
+    for (let delta = 0; delta < listboxHeight; delta += height(next)) {
+      let sibling = up ? next.previousElementSibling : next.nextElementSibling;
+      if (!sibling) {
+        break;
+      }
+
+      next = sibling;
+    }
+
+    return next;
+  },
+
+  _keyDownedButton(evt) {
+    if (evt.altKey && (evt.key === "ArrowUp" || evt.key === "ArrowUp")) {
+      this.toggleList(true);
+      return;
+    }
+
+    let toSelect;
+    switch (evt.key) {
+      case "PageUp":
+      case "ArrowUp":
+        toSelect = this.selected.previousElementSibling;
+        break;
+      case "PageDown":
+      case "ArrowDown":
+        toSelect = this.selected.nextElementSibling;
+        break;
+      case "Home":
+        toSelect = this.selected.parentNode.firstElementChild;
+        break;
+      case "End":
+        toSelect = this.selected.parentNode.lastElementChild;
+        break;
+    }
+
+    if (toSelect && toSelect.classList.contains("option")) {
+      evt.preventDefault();
+      this.selected = toSelect;
+    }
+  },
+
+  _keyDownedInBox(evt) {
+    let toFocus;
+    let cur = this._doc.activeElement;
+
+    switch (evt.key) {
+      case "ArrowUp":
+        toFocus = cur.previousElementSibling || this.listbox.lastElementChild;
+        break;
+      case "ArrowDown":
+        toFocus = cur.nextElementSibling || this.listbox.firstElementChild;
+        break;
+      case "PageUp":
+        toFocus = this._getPagedOption(cur, true);
+        break;
+      case "PageDown":
+        toFocus = this._getPagedOption(cur, false);
+        break;
+      case "Home":
+        toFocus = cur.parentNode.firstElementChild;
+        break;
+      case "End":
+        toFocus = cur.parentNode.lastElementChild;
+        break;
+      case "Escape":
+        this.toggleList(false);
+        break;
+    }
+
+    if (toFocus && toFocus.classList.contains("option")) {
+      evt.preventDefault();
+      toFocus.focus();
+    }
+  },
+
+  _select(option, suppressEvent = false) {
+    let oldSelected = this.selected;
+    if (oldSelected) {
+      oldSelected.removeAttribute("aria-selected");
+      oldSelected.classList.remove("selected");
+    }
+
+    if (option) {
+      option.setAttribute("aria-selected", true);
+      option.classList.add("selected");
+      this.element.querySelector(".current-voice").textContent =
+        option.textContent;
+    }
+
+    if (!suppressEvent) {
+      let evt = this.element.ownerDocument.createEvent("Event");
+      evt.initEvent("change", true, true);
+      this.element.dispatchEvent(evt);
+    }
+  },
+
+  _updateDropdownHeight(now) {
+    let updateInner = () => {
+      let winHeight = this._win.innerHeight;
+      let listbox = this.listbox;
+      let listboxTop = listbox.getBoundingClientRect().top;
+      listbox.style.maxHeight = winHeight - listboxTop - 10 + "px";
+    };
+
+    if (now) {
+      updateInner();
+    } else if (!this._pendingDropdownUpdate) {
+      this._pendingDropdownUpdate = true;
+      this._win.requestAnimationFrame(() => {
+        updateInner();
+        delete this._pendingDropdownUpdate;
+      });
+    }
+  },
+
+  _getOptionFromValue(value) {
+    return Array.from(this.options).find(o => o.dataset.value === value);
+  },
+
+  get element() {
+    return this._elementRef.get();
+  },
+
+  get listbox() {
+    return this._elementRef.get().querySelector(".options");
+  },
+
+  get selectToggle() {
+    return this._elementRef.get().querySelector(".select-toggle");
+  },
+
+  get _win() {
+    return this._winRef.get();
+  },
+
+  get _doc() {
+    return this._win.document;
+  },
+
+  set selected(option) {
+    this._select(option);
+  },
+
+  get selected() {
+    return this.element.querySelector(".options > .option.selected");
+  },
+
+  get options() {
+    return this.element.querySelectorAll(".options > .option");
+  },
+
+  set value(value) {
+    this._select(this._getOptionFromValue(value));
+  },
+
+  get value() {
+    let selected = this.selected;
+    return selected ? selected.dataset.value : "";
+  },
+};
diff --git a/toolkit/components/narrate/moz.build b/toolkit/components/narrate/moz.build
new file mode 100644
index 0000000000..18b4c2bda6
--- /dev/null
+++ b/toolkit/components/narrate/moz.build
@@ -0,0 +1,16 @@
+# -*- 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 = ("Toolkit", "Reader Mode")
+
+EXTRA_JS_MODULES.narrate = [
+    "NarrateControls.sys.mjs",
+    "Narrator.sys.mjs",
+    "VoiceSelect.sys.mjs",
+]
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.toml"]
diff --git a/toolkit/components/narrate/test/NarrateTestUtils.sys.mjs b/toolkit/components/narrate/test/NarrateTestUtils.sys.mjs
new file mode 100644
index 0000000000..92d88e8e3b
--- /dev/null
+++ b/toolkit/components/narrate/test/NarrateTestUtils.sys.mjs
@@ -0,0 +1,150 @@
+/* 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/. */
+
+import { ContentTaskUtils } from "resource://testing-common/ContentTaskUtils.sys.mjs";
+import { Preferences } from "resource://gre/modules/Preferences.sys.mjs";
+import { setTimeout } from "resource://gre/modules/Timer.sys.mjs";
+
+export var NarrateTestUtils = {
+  TOGGLE: ".narrate-toggle",
+  POPUP: ".narrate-dropdown .dropdown-popup",
+  VOICE_SELECT: ".narrate-voices .select-toggle",
+  VOICE_OPTIONS: ".narrate-voices .options",
+  VOICE_SELECTED: ".narrate-voices .options .option.selected",
+  VOICE_SELECT_LABEL: ".narrate-voices .select-toggle .current-voice",
+  RATE: ".narrate-rate-input",
+  START: ".narrate-dropdown:not(.speaking) .narrate-start-stop",
+  STOP: ".narrate-dropdown.speaking .narrate-start-stop",
+  BACK: ".narrate-skip-previous",
+  FORWARD: ".narrate-skip-next",
+
+  isVisible(element) {
+    let win = element.ownerGlobal;
+    let style = win.getComputedStyle(element);
+    if (style.display == "none") {
+      return false;
+    }
+    if (style.visibility != "visible") {
+      return false;
+    }
+    if (win.XULPopupElement.isInstance(element) && element.state != "open") {
+      return false;
+    }
+
+    // Hiding a parent element will hide all its children
+    if (element.parentNode != element.ownerDocument) {
+      return this.isVisible(element.parentNode);
+    }
+
+    return true;
+  },
+
+  isStoppedState(window, ok) {
+    let $ = window.document.querySelector.bind(window.document);
+    ok($(this.BACK).disabled, "back button is disabled");
+    ok($(this.FORWARD).disabled, "forward button is disabled");
+    ok(!!$(this.START), "start button is showing");
+    ok(!$(this.STOP), "stop button is hidden");
+    // This checks for a localized label. Not the best...
+    ok($(this.START).title == "Start (N)", "Button tooltip is correct");
+  },
+
+  isStartedState(window, ok) {
+    let $ = window.document.querySelector.bind(window.document);
+    ok(!$(this.BACK).disabled, "back button is enabled");
+    ok(!$(this.FORWARD).disabled, "forward button is enabled");
+    ok(!$(this.START), "start button is hidden");
+    ok(!!$(this.STOP), "stop button is showing");
+    // This checks for a localized label. Not the best...
+    ok($(this.STOP).title == "Stop (N)", "Button tooltip is correct");
+  },
+
+  selectVoice(window, voiceUri) {
+    if (!this.isVisible(window.document.querySelector(this.VOICE_OPTIONS))) {
+      window.document.querySelector(this.VOICE_SELECT).click();
+    }
+
+    let voiceOption = window.document.querySelector(
+      `.narrate-voices .option[data-value="${voiceUri}"]`
+    );
+
+    voiceOption.focus();
+    voiceOption.click();
+
+    return voiceOption.classList.contains("selected");
+  },
+
+  getEventUtils(window) {
+    let eventUtils = {
+      _EU_Ci: Ci,
+      _EU_Cc: Cc,
+      window,
+      setTimeout,
+      parent: window,
+      navigator: window.navigator,
+      KeyboardEvent: window.KeyboardEvent,
+      KeyEvent: window.KeyEvent,
+    };
+    Services.scriptloader.loadSubScript(
+      "chrome://mochikit/content/tests/SimpleTest/EventUtils.js",
+      eventUtils
+    );
+    return eventUtils;
+  },
+
+  getReaderReadyPromise(window) {
+    return new Promise(resolve => {
+      function observeReady(subject, topic) {
+        if (subject == window) {
+          Services.obs.removeObserver(observeReady, topic);
+          resolve();
+        }
+      }
+
+      if (window.document.body.classList.contains("loaded")) {
+        resolve();
+      } else {
+        Services.obs.addObserver(observeReady, "AboutReader:Ready");
+      }
+    });
+  },
+
+  waitForNarrateToggle(window) {
+    let toggle = window.document.querySelector(this.TOGGLE);
+    return ContentTaskUtils.waitForCondition(() => !toggle.hidden, "");
+  },
+
+  waitForPrefChange(pref) {
+    return new Promise(resolve => {
+      function observeChange() {
+        Services.prefs.removeObserver(pref, observeChange);
+        resolve(Preferences.get(pref));
+      }
+
+      Services.prefs.addObserver(pref, observeChange);
+    });
+  },
+
+  sendBoundaryEvent(window, name, charIndex, charLength) {
+    let detail = { type: "boundary", args: { name, charIndex, charLength } };
+    window.dispatchEvent(new window.CustomEvent("testsynthevent", { detail }));
+  },
+
+  isWordHighlightGone(window, ok) {
+    let $ = window.document.querySelector.bind(window.document);
+    ok(!$(".narrate-word-highlight"), "No more word highlights exist");
+  },
+
+  getWordHighlights(window) {
+    let $$ = window.document.querySelectorAll.bind(window.document);
+    let nodes = Array.from($$(".narrate-word-highlight"));
+    return nodes.map(node => {
+      return {
+        word: node.dataset.word,
+        left: Number(node.style.left.replace(/px$/, "")),
+        top: Number(node.style.top.replace(/px$/, "")),
+      };
+    });
+  },
+};
diff --git a/toolkit/components/narrate/test/browser.toml b/toolkit/components/narrate/test/browser.toml
new file mode 100644
index 0000000000..71257b79bb
--- /dev/null
+++ b/toolkit/components/narrate/test/browser.toml
@@ -0,0 +1,20 @@
+[DEFAULT]
+support-files = [
+  "head.js",
+  "NarrateTestUtils.sys.mjs",
+  "moby_dick.html"
+]
+
+["browser_narrate.js"]
+skip-if = ["os == 'linux' && !debug"]  # Bug 1776050
+
+["browser_narrate_disable.js"]
+
+["browser_narrate_language.js"]
+support-files = ["inferno.html"]
+
+["browser_narrate_toggle.js"]
+
+["browser_voiceselect.js"]
+
+["browser_word_highlight.js"]
diff --git a/toolkit/components/narrate/test/browser_narrate.js b/toolkit/components/narrate/test/browser_narrate.js
new file mode 100644
index 0000000000..df76743d2f
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate.js
@@ -0,0 +1,146 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testNarrate() {
+  setup();
+
+  await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+    let TEST_VOICE = "urn:moz-tts:fake:teresa";
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    let popup = $(NarrateTestUtils.POPUP);
+    ok(!NarrateTestUtils.isVisible(popup), "popup is initially hidden");
+
+    let toggle = $(NarrateTestUtils.TOGGLE);
+    toggle.click();
+
+    ok(NarrateTestUtils.isVisible(popup), "popup toggled");
+
+    let voiceOptions = $(NarrateTestUtils.VOICE_OPTIONS);
+    ok(
+      !NarrateTestUtils.isVisible(voiceOptions),
+      "voice options are initially hidden"
+    );
+
+    $(NarrateTestUtils.VOICE_SELECT).click();
+    ok(NarrateTestUtils.isVisible(voiceOptions), "voice options pop up");
+
+    let prefChanged = NarrateTestUtils.waitForPrefChange("narrate.voice");
+    ok(
+      NarrateTestUtils.selectVoice(content, TEST_VOICE),
+      "test voice selected"
+    );
+    await prefChanged;
+
+    ok(!NarrateTestUtils.isVisible(voiceOptions), "voice options hidden again");
+
+    NarrateTestUtils.isStoppedState(content, ok);
+
+    let promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    $(NarrateTestUtils.START).click();
+    let speechinfo = (await promiseEvent).detail;
+    is(speechinfo.voice, TEST_VOICE, "correct voice is being used");
+    let paragraph = speechinfo.paragraph;
+
+    NarrateTestUtils.isStartedState(content, ok);
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    $(NarrateTestUtils.FORWARD).click();
+    speechinfo = (await promiseEvent).detail;
+    is(speechinfo.voice, TEST_VOICE, "same voice is used");
+    isnot(speechinfo.paragraph, paragraph, "next paragraph is being spoken");
+
+    NarrateTestUtils.isStartedState(content, ok);
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    $(NarrateTestUtils.BACK).click();
+    speechinfo = (await promiseEvent).detail;
+    is(speechinfo.paragraph, paragraph, "first paragraph being spoken");
+
+    NarrateTestUtils.isStartedState(content, ok);
+
+    paragraph = speechinfo.paragraph;
+    $(NarrateTestUtils.STOP).click();
+    await ContentTaskUtils.waitForCondition(
+      () => !$(NarrateTestUtils.STOP),
+      "transitioned to stopped state"
+    );
+    NarrateTestUtils.isStoppedState(content, ok);
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    $(NarrateTestUtils.START).click();
+    speechinfo = (await promiseEvent).detail;
+    is(speechinfo.paragraph, paragraph, "read same paragraph again");
+
+    NarrateTestUtils.isStartedState(content, ok);
+
+    let eventUtils = NarrateTestUtils.getEventUtils(content);
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    prefChanged = NarrateTestUtils.waitForPrefChange("narrate.rate");
+    $(NarrateTestUtils.RATE).focus();
+    eventUtils.sendKey("UP", content);
+    let newspeechinfo = (await promiseEvent).detail;
+    is(newspeechinfo.paragraph, speechinfo.paragraph, "same paragraph");
+    isnot(newspeechinfo.rate, speechinfo.rate, "rate changed");
+    await prefChanged;
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphend");
+    $(NarrateTestUtils.STOP).click();
+    await promiseEvent;
+
+    await ContentTaskUtils.waitForCondition(
+      () => !$(NarrateTestUtils.STOP),
+      "transitioned to stopped state"
+    );
+    NarrateTestUtils.isStoppedState(content, ok);
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "scroll");
+    content.scrollBy(0, 10);
+    await promiseEvent;
+    ok(!NarrateTestUtils.isVisible(popup), "popup is hidden after scroll");
+
+    toggle.click();
+    ok(NarrateTestUtils.isVisible(popup), "popup is toggled again");
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    $(NarrateTestUtils.START).click();
+    await promiseEvent;
+    NarrateTestUtils.isStartedState(content, ok);
+
+    promiseEvent = ContentTaskUtils.waitForEvent(content, "scroll");
+    content.scrollBy(0, -10);
+    await promiseEvent;
+    ok(NarrateTestUtils.isVisible(popup), "popup stays visible after scroll");
+
+    toggle.click();
+    ok(!NarrateTestUtils.isVisible(popup), "popup is dismissed while speaking");
+    NarrateTestUtils.isStartedState(content, ok);
+
+    // Go forward all the way to the end of the article. We should eventually
+    // stop.
+    do {
+      promiseEvent = Promise.race([
+        ContentTaskUtils.waitForEvent(content, "paragraphstart"),
+        ContentTaskUtils.waitForEvent(content, "paragraphsdone"),
+      ]);
+      $(NarrateTestUtils.FORWARD).click();
+    } while ((await promiseEvent).type == "paragraphstart");
+
+    // This is to make sure we are not actively scrolling when the tab closes.
+    content.scroll(0, 0);
+
+    await ContentTaskUtils.waitForCondition(
+      () => !$(NarrateTestUtils.STOP),
+      "transitioned to stopped state"
+    );
+    NarrateTestUtils.isStoppedState(content, ok);
+  });
+});
diff --git a/toolkit/components/narrate/test/browser_narrate_disable.js b/toolkit/components/narrate/test/browser_narrate_disable.js
new file mode 100644
index 0000000000..5097006c3e
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate_disable.js
@@ -0,0 +1,43 @@
+/* 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/. */
+
+"use strict";
+
+const ENABLE_PREF = "narrate.enabled";
+
+registerCleanupFunction(() => {
+  clearUserPref(ENABLE_PREF);
+  teardown();
+});
+
+add_task(async function testNarratePref() {
+  setup();
+
+  await spawnInNewReaderTab(TEST_ARTICLE, function () {
+    is(
+      content.document.querySelectorAll(NarrateTestUtils.TOGGLE).length,
+      1,
+      "narrate is inserted by default"
+    );
+  });
+
+  setBoolPref(ENABLE_PREF, false);
+
+  await spawnInNewReaderTab(TEST_ARTICLE, function () {
+    ok(
+      !content.document.querySelector(NarrateTestUtils.TOGGLE),
+      "narrate is disabled and is not in reader mode"
+    );
+  });
+
+  setBoolPref(ENABLE_PREF, true);
+
+  await spawnInNewReaderTab(TEST_ARTICLE, function () {
+    is(
+      content.document.querySelectorAll(NarrateTestUtils.TOGGLE).length,
+      1,
+      "narrate is re-enabled and appears only once"
+    );
+  });
+});
diff --git a/toolkit/components/narrate/test/browser_narrate_language.js b/toolkit/components/narrate/test/browser_narrate_language.js
new file mode 100644
index 0000000000..d4fcb79f49
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate_language.js
@@ -0,0 +1,99 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testVoiceselectDropdownAutoclose() {
+  setup("automatic", true);
+
+  await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    ok(
+      !!$(".option[data-value='urn:moz-tts:fake:bob']"),
+      "Jamaican English voice available"
+    );
+    ok(
+      !!$(".option[data-value='urn:moz-tts:fake:lenny']"),
+      "Canadian English voice available"
+    );
+    ok(
+      !!$(".option[data-value='urn:moz-tts:fake:amy']"),
+      "British English voice available"
+    );
+
+    ok(
+      !$(".option[data-value='urn:moz-tts:fake:celine']"),
+      "Canadian French voice unavailable"
+    );
+    ok(
+      !$(".option[data-value='urn:moz-tts:fake:julie']"),
+      "Mexican Spanish voice unavailable"
+    );
+
+    $(NarrateTestUtils.TOGGLE).click();
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+      "popup is toggled"
+    );
+
+    let prefChanged = NarrateTestUtils.waitForPrefChange(
+      "narrate.voice",
+      "getCharPref"
+    );
+    NarrateTestUtils.selectVoice(content, "urn:moz-tts:fake:lenny");
+    let voicePref = JSON.parse(await prefChanged);
+    is(voicePref.en, "urn:moz-tts:fake:lenny", "pref set correctly");
+  });
+});
+
+add_task(async function testVoiceselectDropdownAutoclose() {
+  setup("automatic", true);
+
+  await spawnInNewReaderTab(TEST_ITALIAN_ARTICLE, async function () {
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    ok(
+      !!$(".option[data-value='urn:moz-tts:fake:zanetta']"),
+      "Italian voice available"
+    );
+    ok(
+      !!$(".option[data-value='urn:moz-tts:fake:margherita']"),
+      "Italian voice available"
+    );
+
+    ok(
+      !$(".option[data-value='urn:moz-tts:fake:bob']"),
+      "Jamaican English voice available"
+    );
+    ok(
+      !$(".option[data-value='urn:moz-tts:fake:celine']"),
+      "Canadian French voice unavailable"
+    );
+    ok(
+      !$(".option[data-value='urn:moz-tts:fake:julie']"),
+      "Mexican Spanish voice unavailable"
+    );
+
+    $(NarrateTestUtils.TOGGLE).click();
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+      "popup is toggled"
+    );
+
+    let prefChanged = NarrateTestUtils.waitForPrefChange(
+      "narrate.voice",
+      "getCharPref"
+    );
+    NarrateTestUtils.selectVoice(content, "urn:moz-tts:fake:zanetta");
+    let voicePref = JSON.parse(await prefChanged);
+    is(voicePref.it, "urn:moz-tts:fake:zanetta", "pref set correctly");
+  });
+});
diff --git a/toolkit/components/narrate/test/browser_narrate_toggle.js b/toolkit/components/narrate/test/browser_narrate_toggle.js
new file mode 100644
index 0000000000..54de276001
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_narrate_toggle.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// This test verifies that the keyboard shortcut "n" will Start/Stop the
+// narration of an article in readermode when the article is in focus.
+
+registerCleanupFunction(teardown);
+
+add_task(async function testToggleNarrate() {
+  setup();
+
+  await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    let eventUtils = NarrateTestUtils.getEventUtils(content);
+
+    NarrateTestUtils.isStoppedState(content, ok);
+
+    $(NarrateTestUtils.TOGGLE).focus();
+    eventUtils.synthesizeKey("n", {}, content);
+
+    await ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    NarrateTestUtils.isStartedState(content, ok);
+
+    $(NarrateTestUtils.TOGGLE).focus();
+    eventUtils.synthesizeKey("n", {}, content);
+
+    await ContentTaskUtils.waitForCondition(
+      () => !$(NarrateTestUtils.STOP),
+      "transitioned to stopped state"
+    );
+    NarrateTestUtils.isStoppedState(content, ok);
+  });
+});
diff --git a/toolkit/components/narrate/test/browser_voiceselect.js b/toolkit/components/narrate/test/browser_voiceselect.js
new file mode 100644
index 0000000000..4f6c59e3a7
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_voiceselect.js
@@ -0,0 +1,139 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testVoiceselectDropdownAutoclose() {
+  setup();
+
+  await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    $(NarrateTestUtils.TOGGLE).click();
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+      "popup is toggled"
+    );
+
+    ok(
+      !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+      "voice options are initially hidden"
+    );
+
+    $(NarrateTestUtils.VOICE_SELECT).click();
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+      "voice options are toggled"
+    );
+
+    $(NarrateTestUtils.TOGGLE).click();
+    // A focus will follow a real click.
+    $(NarrateTestUtils.TOGGLE).focus();
+    ok(
+      !NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+      "narrate popup is dismissed"
+    );
+
+    $(NarrateTestUtils.TOGGLE).click();
+    // A focus will follow a real click.
+    $(NarrateTestUtils.TOGGLE).focus();
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+      "narrate popup is showing again"
+    );
+    ok(
+      !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+      "voice options are hidden after popup comes back"
+    );
+  });
+});
+
+add_task(async function testVoiceselectLabelChange() {
+  setup();
+
+  await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    $(NarrateTestUtils.TOGGLE).click();
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+      "popup is toggled"
+    );
+
+    ok(
+      NarrateTestUtils.selectVoice(content, "urn:moz-tts:fake:lenny"),
+      "voice selected"
+    );
+
+    let selectedOption = $(NarrateTestUtils.VOICE_SELECTED);
+    let selectLabel = $(NarrateTestUtils.VOICE_SELECT_LABEL);
+
+    is(
+      selectedOption.textContent,
+      selectLabel.textContent,
+      "new label matches selected voice"
+    );
+  });
+});
+
+add_task(async function testVoiceselectKeyboard() {
+  setup();
+
+  await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    $(NarrateTestUtils.TOGGLE).click();
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.POPUP)),
+      "popup is toggled"
+    );
+
+    let eventUtils = NarrateTestUtils.getEventUtils(content);
+
+    let firstValue = $(NarrateTestUtils.VOICE_SELECTED).dataset.value;
+
+    ok(
+      !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+      "voice options initially are hidden"
+    );
+
+    $(NarrateTestUtils.VOICE_SELECT).focus();
+
+    eventUtils.synthesizeKey("KEY_ArrowDown", {}, content);
+
+    await ContentTaskUtils.waitForCondition(
+      () => $(NarrateTestUtils.VOICE_SELECTED).dataset.value != firstValue,
+      "value changed after pressing ArrowDown key"
+    );
+
+    eventUtils.synthesizeKey("KEY_Enter", {}, content);
+
+    ok(
+      NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+      "voice options showing after pressing Enter"
+    );
+
+    eventUtils.synthesizeKey("KEY_ArrowUp", {}, content);
+
+    eventUtils.synthesizeKey("KEY_Enter", {}, content);
+
+    ok(
+      !NarrateTestUtils.isVisible($(NarrateTestUtils.VOICE_OPTIONS)),
+      "voice options hidden after pressing Enter"
+    );
+
+    await ContentTaskUtils.waitForCondition(
+      () => $(NarrateTestUtils.VOICE_SELECTED).dataset.value == firstValue,
+      "value changed back to original after pressing Enter"
+    );
+  });
+});
diff --git a/toolkit/components/narrate/test/browser_word_highlight.js b/toolkit/components/narrate/test/browser_word_highlight.js
new file mode 100644
index 0000000000..709fd06a2e
--- /dev/null
+++ b/toolkit/components/narrate/test/browser_word_highlight.js
@@ -0,0 +1,76 @@
+/* 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/. */
+
+"use strict";
+
+registerCleanupFunction(teardown);
+
+add_task(async function testNarrate() {
+  setup("urn:moz-tts:fake:teresa");
+
+  await spawnInNewReaderTab(TEST_ARTICLE, async function () {
+    let $ = content.document.querySelector.bind(content.document);
+
+    await NarrateTestUtils.waitForNarrateToggle(content);
+
+    let popup = $(NarrateTestUtils.POPUP);
+    ok(!NarrateTestUtils.isVisible(popup), "popup is initially hidden");
+
+    let toggle = $(NarrateTestUtils.TOGGLE);
+    toggle.click();
+
+    ok(NarrateTestUtils.isVisible(popup), "popup toggled");
+
+    NarrateTestUtils.isStoppedState(content, ok);
+
+    let promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+    $(NarrateTestUtils.START).click();
+    let voice = (await promiseEvent).detail.voice;
+    is(voice, "urn:moz-tts:fake:teresa", "double-check voice");
+
+    // Skip forward to first paragraph.
+    let details;
+    do {
+      promiseEvent = ContentTaskUtils.waitForEvent(content, "paragraphstart");
+      $(NarrateTestUtils.FORWARD).click();
+      details = (await promiseEvent).detail;
+    } while (details.tag != "p");
+
+    let boundaryPat = /(\S+)/g;
+    let position = { left: 0, top: 0 };
+    let text = details.paragraph;
+    for (let res = boundaryPat.exec(text); res; res = boundaryPat.exec(text)) {
+      promiseEvent = ContentTaskUtils.waitForEvent(content, "wordhighlight");
+      NarrateTestUtils.sendBoundaryEvent(
+        content,
+        "word",
+        res.index,
+        res[0].length
+      );
+      let { start, end } = (await promiseEvent).detail;
+      let nodes = NarrateTestUtils.getWordHighlights(content);
+      for (let node of nodes) {
+        // Since this is English we can assume each word is to the right or
+        // below the previous one.
+        ok(
+          node.left > position.left || node.top > position.top,
+          "highlight position is moving"
+        );
+        position = { left: node.left, top: node.top };
+      }
+      let wordFromOffset = text.substring(start, end);
+      // XXX: Each node should contain the part of the word it highlights.
+      // Right now, each node contains the entire word.
+      let wordFromHighlight = nodes[0].word;
+      is(wordFromOffset, wordFromHighlight, "Correct word is highlighted");
+    }
+
+    $(NarrateTestUtils.STOP).click();
+    await ContentTaskUtils.waitForCondition(
+      () => !$(NarrateTestUtils.STOP),
+      "transitioned to stopped state"
+    );
+    NarrateTestUtils.isWordHighlightGone(content, ok);
+  });
+});
diff --git a/toolkit/components/narrate/test/head.js b/toolkit/components/narrate/test/head.js
new file mode 100644
index 0000000000..79fa77385e
--- /dev/null
+++ b/toolkit/components/narrate/test/head.js
@@ -0,0 +1,86 @@
+/* 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/. */
+
+/* exported teardown, setup, toggleExtension,
+   spawnInNewReaderTab, TEST_ARTICLE, TEST_ITALIAN_ARTICLE  */
+
+"use strict";
+
+const TEST_ARTICLE =
+  "http://example.com/browser/toolkit/components/narrate/test/moby_dick.html";
+
+const TEST_ITALIAN_ARTICLE =
+  "http://example.com/browser/toolkit/components/narrate/test/inferno.html";
+
+ChromeUtils.defineESModuleGetters(this, {
+  AddonManager: "resource://gre/modules/AddonManager.sys.mjs",
+});
+
+const TEST_PREFS = {
+  "reader.parse-on-load.enabled": true,
+  "media.webspeech.synth.enabled": true,
+  "media.webspeech.synth.test": true,
+  "narrate.enabled": true,
+  "narrate.test": true,
+  "narrate.voice": null,
+  "narrate.filter-voices": false,
+};
+
+function setup(voiceUri = "automatic", filterVoices = false) {
+  let prefs = Object.assign({}, TEST_PREFS, {
+    "narrate.filter-voices": filterVoices,
+    "narrate.voice": JSON.stringify({ en: voiceUri }),
+  });
+
+  // Set required test prefs.
+  Object.entries(prefs).forEach(([name, value]) => {
+    switch (typeof value) {
+      case "boolean":
+        setBoolPref(name, value);
+        break;
+      case "string":
+        setCharPref(name, value);
+        break;
+    }
+  });
+}
+
+function teardown() {
+  // Reset test prefs.
+  Object.entries(TEST_PREFS).forEach(pref => {
+    clearUserPref(pref[0]);
+  });
+}
+
+function spawnInNewReaderTab(url, func) {
+  return BrowserTestUtils.withNewTab(
+    { gBrowser, url: `about:reader?url=${encodeURIComponent(url)}` },
+    async function (browser) {
+      // This imports the test utils for all tests, so we'll declare it as
+      // a global here which will make it ESLint happy.
+      /* global NarrateTestUtils */
+      SpecialPowers.addTaskImport(
+        "NarrateTestUtils",
+        "chrome://mochitests/content/browser/" +
+          "toolkit/components/narrate/test/NarrateTestUtils.sys.mjs"
+      );
+      await SpecialPowers.spawn(browser, [], async function () {
+        await NarrateTestUtils.getReaderReadyPromise(content);
+      });
+      await SpecialPowers.spawn(browser, [], func);
+    }
+  );
+}
+
+function setBoolPref(name, value) {
+  Services.prefs.setBoolPref(name, value);
+}
+
+function setCharPref(name, value) {
+  Services.prefs.setCharPref(name, value);
+}
+
+function clearUserPref(name) {
+  Services.prefs.clearUserPref(name);
+}
diff --git a/toolkit/components/narrate/test/inferno.html b/toolkit/components/narrate/test/inferno.html
new file mode 100644
index 0000000000..58dfd24df1
--- /dev/null
+++ b/toolkit/components/narrate/test/inferno.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Inferno - Canto I</title>
+</head>
+<body>
+  <h1>Inferno</h1>
+  <h2>Canto I: Dante nella selva oscura</h2>
+  <p>
+    Nel mezzo del cammin di nostra vita<br>
+    mi ritrovai per una selva oscura,<br>
+    ché la diritta via era smarrita.
+  </p>
+  <p>
+    Ahi quanto a dir qual era è cosa dura<br>
+    esta selva selvaggia e aspra e forte<br>
+    che nel pensier rinova la paura!
+  </p>
+  <p>
+    Tant' è amara che poco è più morte;<br>
+    ma per trattar del ben ch'i' vi trovai,<br>
+    dirò de l'altre cose ch'i' v'ho scorte.
+  </p>
+  <p>
+    Io non so ben ridir com' i' v'intrai,<br>
+    tant' era pien di sonno a quel punto<br>
+    che la verace via abbandonai.
+  </p>
+  <p>
+    Ma poi ch'i' fui al piè d'un colle giunto,<br>
+    là dove terminava quella valle<br>
+    che m'avea di paura il cor compunto,
+  </p>
+  <p>
+    guardai in alto e vidi le sue spalle<br>
+    vestite già de' raggi del pianeta<br>
+    che mena dritto altrui per ogne calle.
+  </p>
+  <p>
+    Allor fu la paura un poco queta,<br>
+    che nel lago del cor m'era durata<br>
+    la notte ch'i' passai con tanta pieta.
+  </p>
+  <p>
+    E come quei che con lena affannata,<br>
+    uscito fuor del pelago a la riva,<br>
+    si volge a l'acqua perigliosa e guata,
+  </p>
+  <p>
+    così l'animo mio, ch'ancor fuggiva,<br>
+    si volse a retro a rimirar lo passo<br>
+    che non lasciò già mai persona viva.
+  </p>
+  <p>
+    Poi ch'èi posato un poco il corpo lasso,<br>
+    ripresi via per la piaggia diserta,<br>
+    sì che 'l piè fermo sempre era 'l più basso.
+  </p>
+  <p>
+    Ed ecco, quasi al cominciar de l'erta,<br>
+    una lonza leggiera e presta molto,<br>
+    che di pel macolato era coverta;
+  </p>
+  <p>
+    e non mi si partia dinanzi al volto,<br>
+    anzi 'mpediva tanto il mio cammino,<br>
+    ch'i' fui per ritornar più volte vòlto.
+  </p>
+  <p>
+    Temp' era dal principio del mattino,<br>
+    e 'l sol montava 'n sù con quelle stelle<br>
+    ch'eran con lui quando l'amor divino
+  </p>
+  <p>
+    mosse di prima quelle cose belle;<br>
+    sì ch'a bene sperar m'era cagione<br>
+    di quella fiera a la gaetta pelle
+  </p>
+  <p>
+    l'ora del tempo e la dolce stagione;<br>
+    ma non sì che paura non mi desse<br>
+    la vista che m'apparve d'un leone.
+  </p>
+  <p>
+    Questi parea che contra me venisse<br>
+    con la test' alta e con rabbiosa fame,<br>
+    sì che parea che l'aere ne tremesse.
+  </p>
+  <p>
+    Ed una lupa, che di tutte brame<br>
+    sembiava carca ne la sua magrezza,<br>
+    e molte genti fé già viver grame,
+  </p>
+  <p>
+    questa mi porse tanto di gravezza<br>
+    con la paura ch'uscia di sua vista,<br>
+    ch'io perdei la speranza de l'altezza.
+  </p>
+  <p>
+    E qual è quei che volontieri acquista,<br>
+    e giugne 'l tempo che perder lo face,<br>
+    che 'n tutti suoi pensier piange e s'attrista;
+  </p>
+  <p>
+    tal mi fece la bestia sanza pace,<br>
+    che, venendomi 'ncontro, a poco a poco<br>
+    mi ripigneva là dove 'l sol tace.
+  </p>
+  <p>
+    Mentre ch'i' rovinava in basso loco,<br>
+    dinanzi a li occhi mi si fu offerto<br>
+    chi per lungo silenzio parea fioco.
+  </p>
+  <p>
+    Quando vidi costui nel gran diserto,<br>
+    «<em>Miserere</em> di me», gridai a lui,<br>
+    «qual che tu sii, od ombra od omo certo!».
+  </p>
+  <p>
+    Rispuosemi: «Non omo, omo già fui,<br>
+    e li parenti miei furon lombardi,<br>
+    mantoani per patrïa ambedui.
+  </p>
+  <p>
+    Nacqui <em>sub Iulio</em>, ancor che fosse tardi,<br>
+    e vissi a Roma sotto 'l buono Augusto<br>
+    nel tempo de li dèi falsi e bugiardi.
+  </p>
+  <p>
+    Poeta fui, e cantai di quel giusto<br>
+    figliuol d'Anchise che venne di Troia,<br>
+    poi che 'l superbo Ilïón fu combusto.
+  </p>
+  <p>
+    Ma tu perché ritorni a tanta noia?<br>
+    perché non sali il dilettoso monte<br>
+    ch'è principio e cagion di tutta gioia?».
+  </p>
+  <p>
+    «Or se' tu quel Virgilio e quella fonte<br>
+    che spandi di parlar sì largo fiume?»,<br>
+    rispuos' io lui con vergognosa fronte.
+  </p>
+  <p>
+    «O de li altri poeti onore e lume,<br>
+    vagliami 'l lungo studio e 'l grande amore<br>
+    che m'ha fatto cercar lo tuo volume.
+  </p>
+  <p>
+    Tu se' lo mio maestro e 'l mio autore,<br>
+    tu se' solo colui da cu' io tolsi<br>
+    lo bello stilo che m'ha fatto onore.
+  </p>
+  <p>
+    Vedi la bestia per cu' io mi volsi;<br>
+    aiutami da lei, famoso saggio,<br>
+    ch'ella mi fa tremar le vene e i polsi».
+  </p>
+  <p>
+    «A te convien tenere altro vïaggio»,<br>
+    rispuose, poi che lagrimar mi vide,<br>
+    «se vuo' campar d'esto loco selvaggio;
+  </p>
+  <p>
+    ché questa bestia, per la qual tu gride,<br>
+    non lascia altrui passar per la sua via,<br>
+    ma tanto lo 'mpedisce che l'uccide;
+  </p>
+  <p>
+    e ha natura sì malvagia e ria,<br>
+    che mai non empie la bramosa voglia,<br>
+    e dopo 'l pasto ha più fame che pria.
+  </p>
+  <p>
+    Molti son li animali a cui s'ammoglia,<br>
+    e più saranno ancora, infin che 'l veltro<br>
+    verrà, che la farà morir con doglia.
+  </p>
+  <p>
+    Questi non ciberà terra né peltro,<br>
+    ma sapïenza, amore e virtute,<br>
+    e sua nazion sarà tra feltro e feltro.
+  </p>
+  <p>
+    Di quella umile Italia fia salute<br>
+    per cui morì la vergine Cammilla,<br>
+    Eurialo e Turno e Niso di ferute.
+  </p>
+  <p>
+    Questi la caccerà per ogne villa,<br>
+    fin che l'avrà rimessa ne lo 'nferno,<br>
+    là onde 'nvidia prima dipartilla.
+  </p>
+  <p>
+    Ond' io per lo tuo me' penso e discerno<br>
+    che tu mi segui, e io sarò tua guida,<br>
+    e trarrotti di qui per loco etterno;
+  </p>
+  <p>
+    ove udirai le disperate strida,<br>
+    vedrai li antichi spiriti dolenti,<br>
+    ch'a la seconda morte ciascun grida;
+  </p>
+  <p>
+    e vederai color che son contenti<br>
+    nel foco, perché speran di venire<br>
+    quando che sia a le beate genti.
+  </p>
+  <p>
+    A le quai poi se tu vorrai salire,<br>
+    anima fia a ciò più di me degna:<br>
+    con lei ti lascerò nel mio partire;
+  </p>
+  <p>
+    ché quello imperador che là sù regna,<br>
+    perch' i' fu' ribellante a la sua legge,<br>
+    non vuol che 'n sua città per me si vegna.
+  </p>
+  <p>
+    In tutte parti impera e quivi regge;<br>
+    quivi è la sua città e l'alto seggio:<br>
+    oh felice colui cu' ivi elegge!».
+  </p>
+  <p>
+    E io a lui: «Poeta, io ti richeggio<br>
+    per quello Dio che tu non conoscesti,<br>
+    a ciò ch'io fugga questo male e peggio,
+  </p>
+  <p>
+    che tu mi meni là dov' or dicesti,<br>
+    sì ch'io veggia la porta di san Pietro<br>
+    e color cui tu fai cotanto mesti».
+  </p>
+  <p>
+    Allor si mosse, e io li tenni dietro.
+  </p>
+</body>
+</html>
diff --git a/toolkit/components/narrate/test/moby_dick.html b/toolkit/components/narrate/test/moby_dick.html
new file mode 100644
index 0000000000..0beaa20fd1
--- /dev/null
+++ b/toolkit/components/narrate/test/moby_dick.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Moby Dick - Chapter 1. Loomings</title>
+</head>
+<body>
+  <h1>Moby Dick</h1>
+  <h2>Chapter 1. Loomings</h2>
+  <p>
+    Call me Ishmael. <span>Some <span>years</span></span> ago—never mind how
+    long precisely—having little or no money in my purse, and nothing particular
+    to interest me on shore, I thought I would sail about a little and see the
+    watery part of the world. It is a way I have of driving off the spleen and
+    regulating the circulation. Whenever I find myself growing grim about the
+    mouth; whenever it is a damp, drizzly November in my soul; whenever I find
+    myself involuntarily pausing before coffin warehouses, and bringing up the
+    rear of every funeral I meet; and especially whenever my hypos get such an
+    upper hand of me, that it requires a strong moral principle to prevent me
+    from deliberately stepping into the street, and methodically knocking
+    people's hats off—then, I account it high time to get to sea as soon as I
+    can. This is my substitute for pistol and ball. With a philosophical
+    flourish Cato throws himself upon his sword; I quietly take to the ship.
+    There is nothing surprising in this. If they but knew it, almost all men in
+    their degree, some time or other, cherish very nearly the same feelings
+    towards the ocean with me.
+  </p>
+  <p>
+    There now is your insular city of the Manhattoes, belted round by wharves
+    as Indian isles by coral reefs—commerce surrounds it with her surf.
+    Right and left, the streets take you waterward. Its extreme downtown is
+    the battery, where that noble mole is washed by waves, and cooled by
+    breezes, which a few hours previous were out of sight of land. Look at the
+    crowds of water-gazers there.
+  </p>
+  <p>
+    Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears
+    Hook to Coenties Slip, and from thence, by Whitehall, northward. What do
+    you see?—Posted like silent sentinels all around the town, stand
+    thousands upon thousands of mortal men fixed in ocean reveries. Some
+    leaning against the spiles; some seated upon the pier-heads; some looking
+    over the bulwarks of ships from China; some high aloft in the rigging, as
+    if striving to get a still better seaward peep. But these are all
+    landsmen; of week days pent up in lath and plaster—tied to counters,
+    nailed to benches, clinched to desks. How then is this? Are the green
+    fields gone? What do they here?
+  </p>
+  <p>
+    But look! here come more crowds, pacing straight for the water, and
+    seemingly bound for a dive. Strange! Nothing will content them but the
+    extremest limit of the land; loitering under the shady lee of yonder
+    warehouses will not suffice. No. They must get just as nigh the water as
+    they possibly can without falling in. And there they stand—miles of
+    them—leagues. Inlanders all, they come from lanes and alleys,
+    streets and avenues—north, east, south, and west. Yet here they all
+    unite. Tell me, does the magnetic virtue of the needles of the compasses
+    of all those ships attract them thither?
+  </p>
+  <p>
+    Once more. Say you are in the country; in some high land of lakes. Take
+    almost any path you please, and ten to one it carries you down in a dale,
+    and leaves you there by a pool in the stream. There is magic in it. Let
+    the most absent-minded of men be plunged in his deepest reveries—stand
+    that man on his legs, set his feet a-going, and he will infallibly lead
+    you to water, if water there be in all that region. Should you ever be
+    athirst in the great American desert, try this experiment, if your caravan
+    happen to be supplied with a metaphysical professor. Yes, as every one
+    knows, meditation and water are wedded for ever.
+  </p>
+  <p>
+    But here is an artist. He desires to paint you the dreamiest, shadiest,
+    quietest, most enchanting bit of romantic landscape in all the valley of
+    the Saco. What is the chief element he employs? There stand his trees,
+    each with a hollow trunk, as if a hermit and a crucifix were within; and
+    here sleeps his meadow, and there sleep his cattle; and up from yonder
+    cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way,
+    reaching to overlapping spurs of mountains bathed in their hill-side blue.
+    But though the picture lies thus tranced, and though this pine-tree shakes
+    down its sighs like leaves upon this shepherd's head, yet all were vain,
+    unless the shepherd's eye were fixed upon the magic stream before him. Go
+    visit the Prairies in June, when for scores on scores of miles you wade
+    knee-deep among Tiger-lilies—what is the one charm wanting?—Water—there
+    is not a drop of water there! Were Niagara but a cataract of sand, would
+    you travel your thousand miles to see it? Why did the poor poet of
+    Tennessee, upon suddenly receiving two handfuls of silver, deliberate
+    whether to buy him a coat, which he sadly needed, or invest his money in a
+    pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy
+    with a robust healthy soul in him, at some time or other crazy to go to
+    sea? Why upon your first voyage as a passenger, did you yourself feel such
+    a mystical vibration, when first told that you and your ship were now out
+    of sight of land? Why did the old Persians hold the sea holy? Why did the
+    Greeks give it a separate deity, and own brother of Jove? Surely all this
+    is not without meaning. And still deeper the meaning of that story of
+    Narcissus, who because he could not grasp the tormenting, mild image he
+    saw in the fountain, plunged into it and was drowned. But that same image,
+    we ourselves see in all rivers and oceans. It is the image of the
+    ungraspable phantom of life; and this is the key to it all.
+  </p>
+  <p>
+    Now, when I say that I am in the habit of going to sea whenever I begin to
+    grow hazy about the eyes, and begin to be over conscious of my lungs, I do
+    not mean to have it inferred that I ever go to sea as a passenger. For to
+    go as a passenger you must needs have a purse, and a purse is but a rag
+    unless you have something in it. Besides, passengers get sea-sick—grow
+    quarrelsome—don't sleep of nights—do not enjoy themselves
+    much, as a general thing;—no, I never go as a passenger; nor, though
+    I am something of a salt, do I ever go to sea as a Commodore, or a
+    Captain, or a Cook. I abandon the glory and distinction of such offices to
+    those who like them. For my part, I abominate all honourable respectable
+    toils, trials, and tribulations of every kind whatsoever. It is quite as
+    much as I can do to take care of myself, without taking care of ships,
+    barques, brigs, schooners, and what not. And as for going as cook,—though
+    I confess there is considerable glory in that, a cook being a sort of
+    officer on ship-board—yet, somehow, I never fancied broiling fowls;—though
+    once broiled, judiciously buttered, and judgmatically salted and peppered,
+    there is no one who will speak more respectfully, not to say
+    reverentially, of a broiled fowl than I will. It is out of the idolatrous
+    dotings of the old Egyptians upon broiled ibis and roasted river horse,
+    that you see the mummies of those creatures in their huge bake-houses the
+    pyramids.
+  </p>
+  <p>
+    No, when I go to sea, I go as a simple sailor, right before the mast,
+    plumb down into the forecastle, aloft there to the royal mast-head. True,
+    they rather order me about some, and make me jump from spar to spar, like
+    a grasshopper in a May meadow. And at first, this sort of thing is
+    unpleasant enough. It touches one's sense of honour, particularly if you
+    come of an old established family in the land, the Van Rensselaers, or
+    Randolphs, or Hardicanutes. And more than all, if just previous to putting
+    your hand into the tar-pot, you have been lording it as a country
+    schoolmaster, making the tallest boys stand in awe of you. The transition
+    is a keen one, I assure you, from a schoolmaster to a sailor, and requires
+    a strong decoction of Seneca and the Stoics to enable you to grin and bear
+    it. But even this wears off in time.
+  </p>
+  <p>
+    What of it, if some old hunks of a sea-captain orders me to get a broom
+    and sweep down the decks? What does that indignity amount to, weighed, I
+    mean, in the scales of the New Testament? Do you think the archangel
+    Gabriel thinks anything the less of me, because I promptly and
+    respectfully obey that old hunks in that particular instance? Who ain't a
+    slave? Tell me that. Well, then, however the old sea-captains may order me
+    about—however they may thump and punch me about, I have the
+    satisfaction of knowing that it is all right; that everybody else is one
+    way or other served in much the same way—either in a physical or
+    metaphysical point of view, that is; and so the universal thump is passed
+    round, and all hands should rub each other's shoulder-blades, and be
+    content.
+  </p>
+  <p>
+    Again, I always go to sea as a sailor, because they make a point of paying
+    me for my trouble, whereas they never pay passengers a single penny that I
+    ever heard of. On the contrary, passengers themselves must pay. And there
+    is all the difference in the world between paying and being paid. The act
+    of paying is perhaps the most uncomfortable infliction that the two
+    orchard thieves entailed upon us. But <i>being paid</i>,—what will compare
+    with it? The urbane activity with which a man receives money is really
+    marvellous, considering that we so earnestly believe money to be the root
+    of all earthly ills, and that on no account can a monied man enter heaven.
+    Ah! how cheerfully we consign ourselves to perdition!
+  </p>
+  <p>
+    Finally, I always go to sea as a sailor, because of the wholesome exercise
+    and pure air of the fore-castle deck. For as in this world, head winds are
+    far more prevalent than winds from astern (that is, if you never violate
+    the Pythagorean maxim), so for the most part the Commodore on the
+    quarter-deck gets his atmosphere at second hand from the sailors on the
+    forecastle. He thinks he breathes it first; but not so. In much the same
+    way do the commonalty lead their leaders in many other things, at the same
+    time that the leaders little suspect it. But wherefore it was that after
+    having repeatedly smelt the sea as a merchant sailor, I should now take it
+    into my head to go on a whaling voyage; this the invisible police officer
+    of the Fates, who has the constant surveillance of me, and secretly dogs
+    me, and influences me in some unaccountable way—he can better answer
+    than any one else. And, doubtless, my going on this whaling voyage, formed
+    part of the grand programme of Providence that was drawn up a long time
+    ago. It came in as a sort of brief interlude and solo between more
+    extensive performances. I take it that this part of the bill must have run
+    something like this:
+  </p>
+  <p>
+    "<i>Grand Contested Election for the Presidency of the United States.</i>
+    "WHALING VOYAGE BY ONE ISHMAEL. "BLOODY BATTLE IN AFFGHANISTAN."
+  </p>
+  <p>
+    Though I cannot tell why it was exactly that those stage managers, the
+    Fates, put me down for this shabby part of a whaling voyage, when others
+    were set down for magnificent parts in high tragedies, and short and easy
+    parts in genteel comedies, and jolly parts in farces—though I cannot
+    tell why this was exactly; yet, now that I recall all the circumstances, I
+    think I can see a little into the springs and motives which being
+    cunningly presented to me under various disguises, induced me to set about
+    performing the part I did, besides cajoling me into the delusion that it
+    was a choice resulting from my own unbiased freewill and discriminating
+    judgment.
+  </p>
+  <p>
+    Chief among these motives was the overwhelming idea of the great whale
+    himself. Such a portentous and mysterious monster roused all my curiosity.
+    Then the wild and distant seas where he rolled his island bulk; the
+    undeliverable, nameless perils of the whale; these, with all the attending
+    marvels of a thousand Patagonian sights and sounds, helped to sway me to
+    my wish. With other men, perhaps, such things would not have been
+    inducements; but as for me, I am tormented with an everlasting itch for
+    things remote. I love to sail forbidden seas, and land on barbarous
+    coasts. Not ignoring what is good, I am quick to perceive a horror, and
+    could still be social with it—would they let me—since it is
+    but well to be on friendly terms with all the inmates of the place one
+    lodges in.
+  </p>
+  <p>
+    By reason of these things, then, the whaling voyage was welcome; the great
+    flood-gates of the wonder-world swung open, and in the wild conceits that
+    swayed me to my purpose, two and two there floated into my inmost soul,
+    endless processions of the whale, and, mid most of them all, one grand
+    hooded phantom, like a snow hill in the air.
+  </p>
+</body>
+</html>