@pie-lib/math-input-mathlive 1.1.5-beta.10 → 1.1.5-beta.12

package/lib/selection.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.trackWholeAtomSelection = exports.expandRange = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _debug = _interopRequireDefault(require("debug"));
+var log = (0, _debug["default"])('pie-lib:math-input-mathlive:selection');
+
+/**
+ * Widen a selection so it covers whole atoms of a single parent.
+ *
+ * MathLive extends a selection over *flat offsets*, so Shift+Arrow walks into
+ * a fraction instead of over it: from before `2x` in `5x^2+2x+\frac{\pi}{2}-4`,
+ * five presses select `2x+` plus the `\pi` of the numerator, and copying gives
+ * `2x+\pi`. MathQuill treated a fraction (root, superscript...) as one unit,
+ * which is what authors expect.
+ *
+ * The tree is recovered from MathLive's public `getElementInfo(offset)`, where
+ * offset `i` describes the atom ending at caret position `i`:
+ *
+ *  - a composite atom (fraction, root, script) owns the offset right *after*
+ *    its children; the children are one level deeper;
+ *  - each branch (numerator, denominator, radicand) opens with an empty-latex
+ *    "start" atom.
+ *
+ * The rule: find the shallowest depth the selection touches, counting the caret
+ * it starts from. If the range crosses into a sibling branch at that depth, the
+ * real common parent is one level up. Then push both ends out of anything
+ * deeper. A script atom (`^2`) is kept with its base, since MathLive stores
+ * `x^2` as `x` followed by a separate `^2` atom.
+ *
+ * Pure, so it can be tested without a browser.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @param {function(number): {depth?: number, latex?: string}} info
+ * @param {number} lastOffset
+ * @returns {[number, number]} the widened range, start <= end
+ */
+var expandRange = exports.expandRange = function expandRange(start, end, info, lastOffset) {
+  var at = function at(i) {
+    return info(i) || {};
+  };
+  var depth = function depth(i) {
+    return at(i).depth || 0;
+  };
+  var isBranchStart = function isBranchStart(i) {
+    return depth(i) > 0 && at(i).latex === '';
+  };
+  if (end < start) {
+    var _ref = [end, start];
+    start = _ref[0];
+    end = _ref[1];
+  }
+  if (end - start < 1) {
+    return [start, end];
+  }
+  var target = Infinity;
+  for (var i = start; i <= end; i++) {
+    target = Math.min(target, depth(i));
+  }
+  for (var _i = start + 1; _i <= end; _i++) {
+    if (depth(_i) === target && isBranchStart(_i)) {
+      target -= 1;
+      break;
+    }
+  }
+  target = Math.max(target, 0);
+  while (start > 0 && depth(start) > target) {
+    start -= 1;
+  }
+  while (end < lastOffset && depth(end) > target) {
+    end += 1;
+  }
+
+  // Keep a superscript / subscript with its base.
+  var first = start + 1;
+  while (first <= end && depth(first) > target) {
+    first += 1;
+  }
+  if (start > 0 && first <= end && /^[\^_]/.test(at(first).latex || '') && depth(start) === target) {
+    start -= 1;
+  }
+  return [start, end];
+};
+
+/**
+ * Keep a mathfield's selection snapped to whole atoms (see {@link expandRange}).
+ *
+ * This fixes both what the user sees highlighted and what copy/cut put on the
+ * clipboard, since both come from the selection. The selection direction is
+ * preserved, so further Shift+Arrow presses keep extending the same end.
+ *
+ * @param {HTMLElement} mathField a MathLive `<math-field>`
+ * @returns {function|undefined} teardown, to call on unmount
+ */
+var trackWholeAtomSelection = exports.trackWholeAtomSelection = function trackWholeAtomSelection(mathField) {
+  if (!mathField || typeof mathField.addEventListener !== 'function') {
+    return undefined;
+  }
+  var applying = false;
+  var update = function update() {
+    if (applying) {
+      return;
+    }
+    try {
+      if (mathField.selectionIsCollapsed || typeof mathField.getElementInfo !== 'function') {
+        return;
+      }
+      var selection = mathField.selection;
+      var range = selection && selection.ranges && selection.ranges[0];
+      if (!range) {
+        return;
+      }
+      var _range = (0, _slicedToArray2["default"])(range, 2),
+        start = _range[0],
+        end = _range[1];
+      var lo = Math.min(start, end);
+      var hi = Math.max(start, end);
+      var _expandRange = expandRange(lo, hi, function (i) {
+          return mathField.getElementInfo(i);
+        }, mathField.lastOffset),
+        _expandRange2 = (0, _slicedToArray2["default"])(_expandRange, 2),
+        nextStart = _expandRange2[0],
+        nextEnd = _expandRange2[1];
+      if (nextStart === lo && nextEnd === hi) {
+        return;
+      }
+      applying = true;
+      mathField.selection = {
+        ranges: [[nextStart, nextEnd]],
+        direction: selection.direction
+      };
+    } catch (e) {
+      log('could not normalise the selection: %s', e && e.message);
+    } finally {
+      applying = false;
+    }
+  };
+  mathField.addEventListener('selection-change', update);
+  return function () {
+    return mathField.removeEventListener('selection-change', update);
+  };
+};
+//# sourceMappingURL=selection.js.map

package/lib/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","names":["_debug","_interopRequireDefault","require","log","debug","expandRange","exports","start","end","info","lastOffset","at","i","depth","isBranchStart","latex","_ref","target","Infinity","Math","min","max","first","test","trackWholeAtomSelection","mathField","addEventListener","undefined","applying","update","selectionIsCollapsed","getElementInfo","selection","range","ranges","_range","_slicedToArray2","lo","hi","_expandRange","_expandRange2","nextStart","nextEnd","direction","e","message","removeEventListener"],"sources":["../src/selection.js"],"sourcesContent":["import debug from 'debug';\n\nconst log = debug('pie-lib:math-input-mathlive:selection');\n\n/**\n * Widen a selection so it covers whole atoms of a single parent.\n *\n * MathLive extends a selection over *flat offsets*, so Shift+Arrow walks into\n * a fraction instead of over it: from before `2x` in `5x^2+2x+\\frac{\\pi}{2}-4`,\n * five presses select `2x+` plus the `\\pi` of the numerator, and copying gives\n * `2x+\\pi`. MathQuill treated a fraction (root, superscript...) as one unit,\n * which is what authors expect.\n *\n * The tree is recovered from MathLive's public `getElementInfo(offset)`, where\n * offset `i` describes the atom ending at caret position `i`:\n *\n *  - a composite atom (fraction, root, script) owns the offset right *after*\n *    its children; the children are one level deeper;\n *  - each branch (numerator, denominator, radicand) opens with an empty-latex\n *    \"start\" atom.\n *\n * The rule: find the shallowest depth the selection touches, counting the caret\n * it starts from. If the range crosses into a sibling branch at that depth, the\n * real common parent is one level up. Then push both ends out of anything\n * deeper. A script atom (`^2`) is kept with its base, since MathLive stores\n * `x^2` as `x` followed by a separate `^2` atom.\n *\n * Pure, so it can be tested without a browser.\n *\n * @param {number} start\n * @param {number} end\n * @param {function(number): {depth?: number, latex?: string}} info\n * @param {number} lastOffset\n * @returns {[number, number]} the widened range, start <= end\n */\nexport const expandRange = (start, end, info, lastOffset) => {\n  const at = (i) => info(i) || {};\n  const depth = (i) => at(i).depth || 0;\n  const isBranchStart = (i) => depth(i) > 0 && at(i).latex === '';\n\n  if (end < start) {\n    [start, end] = [end, start];\n  }\n\n  if (end - start < 1) {\n    return [start, end];\n  }\n\n  let target = Infinity;\n\n  for (let i = start; i <= end; i++) {\n    target = Math.min(target, depth(i));\n  }\n\n  for (let i = start + 1; i <= end; i++) {\n    if (depth(i) === target && isBranchStart(i)) {\n      target -= 1;\n      break;\n    }\n  }\n\n  target = Math.max(target, 0);\n\n  while (start > 0 && depth(start) > target) {\n    start -= 1;\n  }\n\n  while (end < lastOffset && depth(end) > target) {\n    end += 1;\n  }\n\n  // Keep a superscript / subscript with its base.\n  let first = start + 1;\n\n  while (first <= end && depth(first) > target) {\n    first += 1;\n  }\n\n  if (start > 0 && first <= end && /^[\\^_]/.test(at(first).latex || '') && depth(start) === target) {\n    start -= 1;\n  }\n\n  return [start, end];\n};\n\n/**\n * Keep a mathfield's selection snapped to whole atoms (see {@link expandRange}).\n *\n * This fixes both what the user sees highlighted and what copy/cut put on the\n * clipboard, since both come from the selection. The selection direction is\n * preserved, so further Shift+Arrow presses keep extending the same end.\n *\n * @param {HTMLElement} mathField a MathLive `<math-field>`\n * @returns {function|undefined} teardown, to call on unmount\n */\nexport const trackWholeAtomSelection = (mathField) => {\n  if (!mathField || typeof mathField.addEventListener !== 'function') {\n    return undefined;\n  }\n\n  let applying = false;\n\n  const update = () => {\n    if (applying) {\n      return;\n    }\n\n    try {\n      if (mathField.selectionIsCollapsed || typeof mathField.getElementInfo !== 'function') {\n        return;\n      }\n\n      const selection = mathField.selection;\n      const range = selection && selection.ranges && selection.ranges[0];\n\n      if (!range) {\n        return;\n      }\n\n      const [start, end] = range;\n      const lo = Math.min(start, end);\n      const hi = Math.max(start, end);\n      const [nextStart, nextEnd] = expandRange(lo, hi, (i) => mathField.getElementInfo(i), mathField.lastOffset);\n\n      if (nextStart === lo && nextEnd === hi) {\n        return;\n      }\n\n      applying = true;\n      mathField.selection = { ranges: [[nextStart, nextEnd]], direction: selection.direction };\n    } catch (e) {\n      log('could not normalise the selection: %s', e && e.message);\n    } finally {\n      applying = false;\n    }\n  };\n\n  mathField.addEventListener('selection-change', update);\n\n  return () => mathField.removeEventListener('selection-change', update);\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.1.5-beta.10",
+  "version": "1.1.5-beta.12",
   "description": "MathLive-based math input (drop-in alternative to @pie-lib/math-input)",
   "main": "lib/index.js",
   "module": "src/index.jsx",

package/src/__tests__/input-selection.test.jsx

@@ -0,0 +1,64 @@
+/**
+ * The editable Input keeps its selection snapped to whole atoms (see
+ * selection.js). This checks the wiring: attached on mount, removed on unmount.
+ */
+jest.mock('../mathlive-instance', () => {
+  class FakeMathfieldElement {
+    constructor() {
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    MATH_MODE_SPACE: '\\ ',
+    applyShadowStyles: () => {},
+    trackPlaceholderCaret: () => () => {},
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+const mockUntrack = jest.fn();
+
+jest.mock('../selection', () => ({
+  trackWholeAtomSelection: jest.fn(() => mockUntrack),
+}));
+
+// eslint-disable-next-line import/first
+import Input from '../mf/input';
+// eslint-disable-next-line import/first
+import { trackWholeAtomSelection } from '../selection';
+
+describe('Input: whole-atom selection', () => {
+  beforeEach(() => {
+    trackWholeAtomSelection.mockClear();
+    mockUntrack.mockClear();
+  });
+
+  it('attaches the tracker to the mathfield on mount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+
+    expect(trackWholeAtomSelection).toHaveBeenCalledTimes(1);
+    expect(trackWholeAtomSelection).toHaveBeenCalledWith(input.mathField);
+  });
+
+  it('removes it on unmount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+    input.componentWillUnmount();
+
+    expect(mockUntrack).toHaveBeenCalledTimes(1);
+    expect(input.untrackSelection).toBeUndefined();
+  });
+});

package/src/__tests__/longdiv-wiring.test.jsx

@@ -0,0 +1,137 @@
+/**
+ * Every place that draws MathLive output must apply the long-division
+ * correction (see longdiv.js): live fields after every render, static markup
+ * after it is written into the DOM.
+ */
+jest.mock('../mathlive-instance', () => {
+  class FakeMathfieldElement {
+    constructor() {
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    MATH_MODE_SPACE: '\\ ',
+    applyShadowStyles: () => {},
+    trackPlaceholderCaret: () => () => {},
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+const mockUntrack = jest.fn();
+
+jest.mock('../longdiv', () => ({
+  trackLongDivision: jest.fn(() => mockUntrack),
+  fixLongDivisionWhenReady: jest.fn(),
+  fixLongDivision: jest.fn(),
+}));
+
+/* eslint-disable import/first */
+import Input from '../mf/input';
+import Static from '../mf/static';
+import { LatexLabel } from '../keypad';
+import { trackLongDivision, fixLongDivisionWhenReady } from '../longdiv';
+/* eslint-enable import/first */
+
+beforeEach(() => {
+  trackLongDivision.mockClear();
+  fixLongDivisionWhenReady.mockClear();
+  mockUntrack.mockClear();
+});
+
+describe('Input (the editor)', () => {
+  it('tracks the mathfield on mount and stops on unmount', async () => {
+    const input = new Input({});
+
+    input.holderRef = { current: document.createElement('span') };
+    await input.componentDidMount();
+
+    expect(trackLongDivision).toHaveBeenCalledWith(input.mathField);
+
+    input.componentWillUnmount();
+
+    expect(mockUntrack).toHaveBeenCalledTimes(1);
+    expect(input.untrackLongDivision).toBeUndefined();
+  });
+});
+
+describe('Static', () => {
+  it('tracks the answer-block field on mount and stops on unmount', async () => {
+    const s = new Static({ latex: 'x=\\MathQuillMathField[r1]{}' });
+
+    s.holderRef = { current: document.createElement('span') };
+    s.createLiveRegion = () => {};
+    await s.componentDidMount();
+
+    expect(trackLongDivision).toHaveBeenCalledWith(s.mathField);
+
+    s.componentWillUnmount();
+
+    expect(mockUntrack).toHaveBeenCalledTimes(1);
+  });
+
+  // Display mode: the markup reaches the DOM through state, so it is corrected
+  // once React has written it.
+  it('corrects static markup after it is rendered', () => {
+    const s = new Static({ latex: '5\\longdiv{144}' });
+    const holder = document.createElement('span');
+
+    s.holderRef = { current: holder };
+    s.state = { markup: '<span>new</span>' };
+    s.componentDidUpdate({ latex: '5\\longdiv{144}' }, { markup: '' });
+
+    expect(fixLongDivisionWhenReady).toHaveBeenCalledWith(holder);
+  });
+
+  it('does not redo it when the markup did not change', () => {
+    const s = new Static({ latex: 'x' });
+
+    s.holderRef = { current: document.createElement('span') };
+    s.state = { markup: '<span>same</span>' };
+    s.componentDidUpdate({ latex: 'x' }, { markup: '<span>same</span>' });
+
+    expect(fixLongDivisionWhenReady).not.toHaveBeenCalled();
+  });
+
+  it('leaves a live field to the tracker', () => {
+    const s = new Static({ latex: 'x' });
+
+    s.holderRef = { current: document.createElement('span') };
+    s.mathField = document.createElement('math-field');
+    s.state = { markup: '<span>new</span>' };
+    s.componentDidUpdate({ latex: 'x' }, { markup: '' });
+
+    expect(fixLongDivisionWhenReady).not.toHaveBeenCalled();
+  });
+});
+
+describe('keypad label', () => {
+  it('corrects the label once mounted', async () => {
+    const label = new LatexLabel({ latex: '\\longdiv{}' });
+    const el = document.createElement('span');
+
+    label.labelRef = { current: el };
+    await label.componentDidMount();
+
+    expect(fixLongDivisionWhenReady).toHaveBeenCalledWith(el);
+  });
+
+  it('corrects it again when the label changes', () => {
+    const label = new LatexLabel({ latex: '\\longdiv{}' });
+    const el = document.createElement('span');
+
+    label.labelRef = { current: el };
+    label.setState = () => {};
+    label.state = { markup: '<span>other</span>' };
+    label.componentDidUpdate({ latex: '\\longdiv{}' }, { markup: '<span>first</span>' });
+
+    expect(fixLongDivisionWhenReady).toHaveBeenCalledWith(el);
+  });
+});

package/src/__tests__/longdiv.test.js

@@ -0,0 +1,259 @@
+import { fixLongDivision, fixLongDivisionWhenReady, trackLongDivision } from '../longdiv';
+
+/**
+ * Markup captured verbatim from MathLive 0.110.0 `convertLatexToMarkup` in
+ * Chrome. In `12\enclose{longdiv}{144}` MathLive drops the dividend 0.45em
+ * (`top:0.45em`), sizes the box 2.1em wide while the viewBox is 2.54 wide, and
+ * ends the bar at 1.8 although the dividend runs to 0.3 + 0.45 + 1.5 = 2.25.
+ */
+const LONGDIV =
+  '<span class="ML__latex"><span class="ML__strut" style="height:0.8em"></span><span class="ML__strut--bottom" style="height:1.25em;vertical-align:-0.44em"></span><span class="ML__base"><span class="ML__cmr">12</span><span style="position:relative;height:1.24em;display:inline-block;margin-left:0.3em;margin-right:0.3em;width:1.95em"><span class="ML__notation" style="box-sizing:border-box;left:calc(-1 * 1px - 0.3em);height:calc( 1.24444em + 1px);top:0em;width:calc(2.1em + 1px);background-color:transparent"><span style="display: inline-block;height:1.24em;vertical-align:0.44em;"></span><svg style="position:absolute;overflow:visible;height:1.24em;top:0;left:0;width:100%;z-index:2;" stroke-width="0.06em" stroke="currentColor" stroke-linecap="round" viewBox="0 0 2.54 1.24"><line x1="0.3"  y1="0.3" x2="1.8" y2="0.3" vector-effect="non-scaling-stroke"></line><path d="M 0.3 0.3  a0.3 0.46997, 0, 1, 1, 0 0.93994 " stroke-width="0.004em" stroke="currentColor" fill="none"/></svg></span><span style="position:relative;display:inline-block;height:0.65em;width:1.5em;margin-left:0.45em;top:0.45em"><span class="ML__cmr">144</span></span></span></span></span>';
+
+// \enclose{box}{x}: another notation, which must be left alone
+const BOX =
+  '<span class="ML__latex"><span class="ML__strut" style="height:1.04em"></span><span class="ML__base"><span style="position:relative;height:1.03em;display:inline-block;margin-left:0.3em;margin-right:0.3em;width:0.58em"><span class="ML__notation" style="box-sizing:border-box;left:calc(-1 * 1px - 0.3em);height:calc( 1.03056em + 1px);top:0em;width:calc(1.17153em + 1px);background-color:transparent;border:1px solid red"></span><span style="position:relative;display:inline-block;height:0.44em;width:0.58em"><span class="ML__mathit">x</span></span></span></span></span>';
+
+const mount = (html) => {
+  const el = document.createElement('div');
+
+  el.innerHTML = html;
+  document.body.appendChild(el);
+
+  return el;
+};
+
+const parts = (el) => {
+  const notation = el.querySelector('.ML__notation');
+
+  return {
+    notation,
+    box: notation.parentElement,
+    dividend: notation.nextElementSibling,
+    line: notation.querySelector('line'),
+  };
+};
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('fixLongDivision', () => {
+  it('puts the dividend back on the baseline', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+
+    const { dividend, box } = parts(el);
+
+    expect(dividend.style.top).toEqual('0px');
+    // the drawing keeps its place relative to the dividend, and the line grows
+    // so the field does not clip the bar
+    expect(box.style.paddingTop).toEqual('0.45em');
+  });
+
+  it('sizes the box to the viewBox, so the drawing is not scaled down', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+
+    expect(parts(el).notation.style.width).toEqual('calc(2.54em + 1px)');
+  });
+
+  it('runs the bar to the end of the dividend', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+
+    // no layout under jsdom, so from MathLive's numbers: start + gap + width
+    expect(parseFloat(parts(el).line.getAttribute('x2'))).toBeCloseTo(0.3 + 0.45 + 1.5, 6);
+  });
+
+  // MathLive's width leaves out the spacing around `,` and `+`, so when the
+  // markup is laid out the end is measured instead.
+  it('measures the bar end from the rendered dividend when laid out', () => {
+    const el = mount(LONGDIV);
+    const { notation, dividend } = parts(el);
+    const svg = notation.querySelector('svg');
+    const glyph = dividend.querySelector('.ML__cmr');
+
+    // the svg is 254px wide for a 2.54-unit viewBox: 100px per unit
+    svg.getBoundingClientRect = () => ({ left: 100, width: 254, right: 354 });
+    glyph.getBoundingClientRect = () => ({ left: 145, right: 340, width: 195 });
+
+    fixLongDivision(el);
+
+    expect(parseFloat(parts(el).line.getAttribute('x2'))).toBeCloseTo(2.4, 6);
+  });
+
+  it('ignores the caret when measuring', () => {
+    const el = mount(LONGDIV);
+    const { notation, dividend } = parts(el);
+    const caret = document.createElement('span');
+
+    caret.className = 'ML__caret';
+    dividend.appendChild(caret);
+    notation.querySelector('svg').getBoundingClientRect = () => ({ left: 100, width: 254, right: 354 });
+    dividend.querySelector('.ML__cmr').getBoundingClientRect = () => ({ left: 145, right: 340, width: 195 });
+    caret.getBoundingClientRect = () => ({ left: 400, right: 402, width: 2 });
+
+    fixLongDivision(el);
+
+    expect(parseFloat(parts(el).line.getAttribute('x2'))).toBeCloseTo(2.4, 6);
+  });
+
+  it('can run again without drifting', () => {
+    const el = mount(LONGDIV);
+
+    fixLongDivision(el);
+    const first = { ...parts(el), x2: parts(el).line.getAttribute('x2') };
+
+    fixLongDivision(el);
+    const second = parts(el);
+
+    expect(second.line.getAttribute('x2')).toEqual(first.x2);
+    expect(second.box.style.paddingTop).toEqual('0.45em');
+    expect(second.notation.style.width).toEqual('calc(2.54em + 1px)');
+  });
+
+  it('leaves other enclose notations alone', () => {
+    const el = mount(BOX);
+    const before = el.innerHTML;
+
+    expect(fixLongDivision(el)).toBe(0);
+    expect(el.innerHTML).toEqual(before);
+  });
+
+  it('counts what it corrected', () => {
+    expect(fixLongDivision(mount(LONGDIV + LONGDIV))).toBe(2);
+  });
+
+  it('is safe on nothing', () => {
+    expect(fixLongDivision(null)).toBe(0);
+    expect(fixLongDivision(mount('<span>plain</span>'))).toBe(0);
+  });
+});
+
+describe('fixLongDivisionWhenReady', () => {
+  it('corrects now, and again once the fonts have loaded', async () => {
+    let fontsLoaded;
+    const original = document.fonts;
+
+    Object.defineProperty(document, 'fonts', {
+      configurable: true,
+      value: { ready: new Promise((resolve) => (fontsLoaded = resolve)) },
+    });
+
+    try {
+      const el = mount(LONGDIV);
+
+      fixLongDivisionWhenReady(el);
+      expect(parts(el).dividend.style.top).toEqual('0px');
+
+      // a re-render before the fonts arrive...
+      el.innerHTML = LONGDIV;
+      fontsLoaded();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      // ...is corrected once they do
+      expect(parts(el).dividend.style.top).toEqual('0px');
+    } finally {
+      Object.defineProperty(document, 'fonts', { configurable: true, value: original });
+    }
+  });
+});
+
+describe('trackLongDivision', () => {
+  const field = () => {
+    const host = document.createElement('div');
+
+    host.attachShadow({ mode: 'open' });
+    host.shadowRoot.innerHTML = LONGDIV;
+    document.body.appendChild(host);
+
+    return host;
+  };
+
+  it('corrects the field straight away', () => {
+    const host = field();
+
+    trackLongDivision(host);
+
+    expect(parts(host.shadowRoot).dividend.style.top).toEqual('0px');
+  });
+
+  // jest.setup.js replaces MutationObserver with a no-op for every test, so this
+  // installs one that records what it was asked to observe and can be fired.
+  describe('re-rendering', () => {
+    let observers;
+    const RealObserver = global.MutationObserver;
+
+    beforeEach(() => {
+      observers = [];
+      global.MutationObserver = class {
+        constructor(callback) {
+          this.callback = callback;
+          this.disconnected = false;
+          observers.push(this);
+        }
+
+        observe(target, options) {
+          this.target = target;
+          this.options = options;
+        }
+
+        disconnect() {
+          this.disconnected = true;
+        }
+      };
+    });
+
+    afterEach(() => {
+      global.MutationObserver = RealObserver;
+    });
+
+    it('watches the whole shadow tree for MathLive rebuilding it', () => {
+      const host = field();
+
+      trackLongDivision(host);
+
+      expect(observers).toHaveLength(1);
+      expect(observers[0].target).toBe(host.shadowRoot);
+      expect(observers[0].options).toEqual({ childList: true, subtree: true });
+    });
+
+    // MathLive rebuilds its shadow DOM on every keystroke, resize and font load.
+    it('re-corrects after MathLive re-renders', () => {
+      const host = field();
+
+      trackLongDivision(host);
+      host.shadowRoot.innerHTML = LONGDIV;
+      expect(parts(host.shadowRoot).dividend.style.top).toEqual('0.45em');
+
+      observers[0].callback([]);
+
+      expect(parts(host.shadowRoot).dividend.style.top).toEqual('0px');
+    });
+
+    // The corrections change attributes only, so observing childList alone
+    // cannot loop.
+    it('does not observe attributes', () => {
+      trackLongDivision(field());
+
+      expect(observers[0].options.attributes).toBeUndefined();
+    });
+
+    it('stops after teardown', () => {
+      const untrack = trackLongDivision(field());
+
+      untrack();
+
+      expect(observers[0].disconnected).toBe(true);
+    });
+  });
+
+  it('is a no-op without a shadow root', () => {
+    expect(trackLongDivision(undefined)).toBeUndefined();
+    expect(trackLongDivision(document.createElement('div'))).toBeUndefined();
+  });
+});