Bug 1477261 - (Part 2) Replace integration test with unit test for font-size conversion. r=pbro

MozReview-Commit-ID: AEzbsqGlu9K

--HG--
extra : rebase_source : 818a780ef84e3bb5e31ccaad2cc64fe478e99b55

devtools/client/inspector/fonts/test/browser.ini

@@ -3,6 +3,7 @@ tags = devtools
 subsuite = devtools
 support-files =
   doc_browser_fontinspector.html
+  doc_browser_fontinspector_iframe.html
   test_iframe.html
   ostrich-black.ttf
   ostrich-regular.ttf
@@ -21,7 +22,6 @@ skip-if = !e10s # too slow on !e10s, logging fully serialized actors (Bug 144659
 subsuite = clipboard
 [browser_fontinspector_edit-previews.js]
 [browser_fontinspector_editor-font-size-conversion.js]
-skip-if = true # Bug 1476535
 [browser_fontinspector_editor-values.js]
 [browser_fontinspector_editor-keywords.js]
 [browser_fontinspector_expand-css-code.js]

devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js

@@ -5,67 +5,67 @@
 
 "use strict";
 
-// Test that changes to font-size units converts the value to the destination unit.
-// Check that converted values are applied to the inline style of the selected element.
+// 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.html";
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector_iframe.html";
 
 add_task(async function() {
   await pushPref("devtools.inspector.fonteditor.enabled", true);
-  const { inspector, view, tab, testActor } = await openFontInspectorForURL(TEST_URI);
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
   const property = "font-size";
-  const selector = "div";
+  const selector = ".viewport-size";
   const UNITS = {
-    "px": "36px",
-    "%": "100%",
-    "em": "1em",
+    "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 selectNode(selector, inspector);
+  const node = await getNodeFrontInFrame(selector, "#frame", inspector);
+  await selectNode(node, inspector);
 
   info("Check that font editor shows font-size value in original units");
-  let fontSize = getPropertyValue(viewDoc, property);
-  is(fontSize.unit, "em", "Original unit for font size is em");
-  is(fontSize.value + fontSize.unit, "1em", "Original font size is 1em");
+  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];
-    const onEditorUpdated = inspector.once("fonteditor-updated");
 
     info(`Convert font-size from ${prevValue}${prevUnit} to ${unit}`);
-    await view.onPropertyChange(property, prevValue, prevUnit, unit);
-    info("Waiting for font editor to re-render");
-    await onEditorUpdated;
-    info(`Waiting for font-size unit dropdown to re-render with selected value: ${unit}`);
-    await waitFor(() => {
-      const sel = `#font-editor .font-value-slider[name=${property}] ~ .font-unit-select`;
-      return viewDoc.querySelector(sel).value === unit;
-    });
-    info("Waiting for testactor reflow");
-    await testActor.reflow();
-
-    info(`Check that font editor font-size value is converted to ${unit}`);
-    fontSize = getPropertyValue(viewDoc, property);
-    is(fontSize.unit, unit, `Font size unit is converted to ${unit}`);
-    is(fontSize.value + fontSize.unit, value, `Font size in font editor is ${value}`);
-
-    info(`Check that inline style font-size value is converted to ${unit}`);
-    const inlineStyleValue = await getInlineStyleValue(tab, selector, property);
-    is(inlineStyleValue, value, `Font size on inline style is ${value}`);
+    const convertedValue = await view.convertUnits(prevValue, prevUnit, unit);
+    is(convertedValue, value, `Converting to ${unit} returns transformed value.`);
 
     // Store current unit and value to use in conversion on the next iteration.
-    prevUnit = fontSize.unit;
-    prevValue = fontSize.value;
+    prevUnit = unit;
+    prevValue = value;
   }
-});
 
-async function getInlineStyleValue(tab, selector, property) {
-  return ContentTask.spawn(tab.linkedBrowser, { selector, property }, function(args) {
-    const el = content.document.querySelector(args.selector);
-    return el && el.style[args.property];
-  });
-}
+  info(`Check that conversion from fake unit returns 1-to-1 mapping.`);
+  const valueFromFakeUnit = await view.convertUnits(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(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(1, "bogus", "fake");
+  is(valueBetweenFakeUnit, 1, `Converting between fake units returns same value.`);
+});

devtools/client/inspector/fonts/test/doc_browser_fontinspector.html

@@ -42,6 +42,9 @@
     font-family: bar;
     font-weight: 800;
   }
+  .viewport-size {
+    font-size: 10vw;
+  }
 </style>
 
 <body>
@@ -54,4 +57,5 @@
   <div class="bold-text">BOLD DIV</div>
   <div class="black-text">800 DIV</div>
   <div class="empty"></div>
+  <div class="viewport-size">VIEWPORT SIZE</div>
 </body>

devtools/client/inspector/fonts/test/doc_browser_fontinspector_iframe.html

@@ -0,0 +1,5 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<iframe id="frame" src="doc_browser_fontinspector.html" width="500" height="250"></iframe>