1 files changed, 85 insertions, 0 deletions
diff --git a/devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js
new file mode 100644
index 0000000000..f12769ff01
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Unit test for math behind conversion of units for font-size. A reference element is
+// needed for converting to and from relative units (rem, em, %). A controlled viewport
+// is needed (iframe) for converting to and from viewport units (vh, vw, vmax, vmin).
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector_iframe.html";
+
+add_task(async function () {
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+  const property = "font-size";
+  const selector = ".viewport-size";
+  const UNITS = {
+    px: 50,
+    vw: 10,
+    vh: 20,
+    vmin: 20,
+    vmax: 10,
+    em: 1.389,
+    rem: 3.125,
+    "%": 138.889,
+    pt: 37.5,
+    pc: 3.125,
+    mm: 13.229,
+    cm: 1.323,
+    in: 0.521,
+  };
+
+  await selectNodeInFrames(["#frame", selector], inspector);
+
+  info("Check that font editor shows font-size value in original units");
+  const fontSize = getPropertyValue(viewDoc, property);
+  is(fontSize.unit, "vw", "Original unit for font size is vw");
+  is(fontSize.value + fontSize.unit, "10vw", "Original font size is 10vw");
+
+  // Starting value and unit for conversion.
+  let prevValue = fontSize.value;
+  let prevUnit = fontSize.unit;
+
+  for (const unit in UNITS) {
+    const value = UNITS[unit];
+
+    info(`Convert font-size from ${prevValue}${prevUnit} to ${unit}`);
+    const convertedValue = await view.convertUnits(
+      property,
+      prevValue,
+      prevUnit,
+      unit
+    );
+    is(
+      parseFloat(convertedValue),
+      parseFloat(value),
+      `Converting to ${unit} returns transformed value.`
+    );
+
+    // Store current unit and value to use in conversion on the next iteration.
+    prevUnit = unit;
+    prevValue = value;
+  }
+
+  info(`Check that conversion from fake unit returns 1-to-1 mapping.`);
+  const valueFromFakeUnit = await view.convertUnits(property, 1, "fake", "px");
+  is(valueFromFakeUnit, 1, `Converting from fake unit returns same value.`);
+
+  info(`Check that conversion to fake unit returns 1-to-1 mapping`);
+  const valueToFakeUnit = await view.convertUnits(property, 1, "px", "fake");
+  is(valueToFakeUnit, 1, `Converting to fake unit returns same value.`);
+
+  info(`Check that conversion between fake units returns 1-to-1 mapping.`);
+  const valueBetweenFakeUnit = await view.convertUnits(
+    property,
+    1,
+    "bogus",
+    "fake"
+  );
+  is(
+    valueBetweenFakeUnit,
+    1,
+    `Converting between fake units returns same value.`
+  );
+});