--- a/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
@@ -18,41 +18,52 @@ const TEST_URI = `
font-family: foo, monospace, monospace, serif;
}
#id4 {
font-family: foo, bar;
}
#id5 {
font-family: "monospace";
}
+ #id6 {
+ font-family: georgia, arial;
+ }
</style>
<div id="id1">Text</div>
<div id="id2">Text</div>
<div id="id3">Text</div>
<div id="id4">Text</div>
<div id="id5">Text</div>
+ <div id="id6">A Ɋ</div>
`;
// Tests that font-family properties in the rule-view correctly
// indicates which font is in use.
// Each entry in the test array should contain:
// {
// selector: the rule-view selector to look for font-family in
// nb: the number of fonts this property should have
-// used: the index of the font that should be highlighted, or
-// -1 if none should be highlighted
+// used: the indexes of all the fonts that should be highlighted, or null if none should
+// be highlighter
// }
const TESTS = [
- {selector: "#id1", nb: 3, used: 2}, // sans-serif
- {selector: "#id2", nb: 1, used: 0}, // serif
- {selector: "#id3", nb: 4, used: 1}, // monospace
- {selector: "#id4", nb: 2, used: -1},
- {selector: "#id5", nb: 1, used: 0}, // monospace
+ {selector: "#id1", nb: 3, used: [2]}, // sans-serif
+ {selector: "#id2", nb: 1, used: [0]}, // serif
+ {selector: "#id3", nb: 4, used: [1]}, // monospace
+ {selector: "#id4", nb: 2, used: null},
+ {selector: "#id5", nb: 1, used: [0]}, // monospace
];
+if (Services.appinfo.OS !== "Linux") {
+ // Both georgia and arial are used because the second character can't be rendered with
+ // georgia, so the browser falls back. Also, skip this on Linux which has neither of
+ // these fonts.
+ TESTS.push({selector: "#id6", nb: 2, used: [0, 1]});
+}
+
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
for (let {selector, nb, used} of TESTS) {
let onFontHighlighted = view.once("font-highlighted");
yield selectNode(selector, inspector);
yield onFontHighlighted;
@@ -61,13 +72,20 @@ add_task(function* () {
let prop = getRuleViewProperty(view, selector, "font-family").valueSpan;
let fonts = prop.querySelectorAll(".ruleview-font-family");
ok(fonts.length, "Fonts found in the property");
is(fonts.length, nb, "Correct number of fonts found in the property");
const highlighted = [...fonts].filter(span => span.classList.contains("used-font"));
+ const expectedHighlightedNb = used === null ? 0 : used.length;
+ is(highlighted.length, expectedHighlightedNb, "Correct number of used fonts found");
- ok(highlighted.length <= 1, "No more than one font highlighted");
- is([...fonts].findIndex(f => f === highlighted[0]), used, "Correct font highlighted");
+ let highlightedIndex = 0;
+ [...fonts].forEach((font, index) => {
+ if (font === highlighted[highlightedIndex]) {
+ is(index, used[highlightedIndex], "The right font is highlighted");
+ highlightedIndex++;
+ }
+ });
}
});