diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js new file mode 100644 index 0000000000..f0dc95f15c --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js @@ -0,0 +1,125 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that a used font-family is highlighted in the rule-view. + +const TEST_URI = ` + <style type="text/css"> + #id1 { + font-family: foo, bar, sans-serif; + } + #id2 { + font-family: serif; + } + #id3 { + font-family: foo, monospace, monospace, serif; + } + #id4 { + font-family: foo, bar; + } + #id5 { + font-family: "monospace"; + } + #id6 { + font-family: georgia, arial; + } + #id7 { + font-family: foo, serif !important; + } + #id8 { + font-family: important; + } + #id9::before { + content: ' '; + font-family: foo, monospace; + } + </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> + <div id="id7">Text</div> + <div id="id8">Text</div> + <div id="id9">Text</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: +// { +// baseSelector: the rule-view selector to look for font-family in +// nb: the number of fonts this property should have +// used: the indexes of all the fonts that should be highlighted, or null if none should +// be highlighted +// selectBeforePseudoElement: Whether the before pseudo element should be selectd or not +// } +const TESTS = [ + { baseSelector: "#id1", nb: 3, used: [2] }, // sans-serif + { baseSelector: "#id2", nb: 1, used: [0] }, // serif + { baseSelector: "#id3", nb: 4, used: [1] }, // monospace + { baseSelector: "#id4", nb: 2, used: null }, + { baseSelector: "#id5", nb: 1, used: [0] }, // monospace + { baseSelector: "#id7", nb: 2, used: [1] }, // serif + { baseSelector: "#id8", nb: 1, used: null }, + { baseSelector: "#id9", nb: 2, used: [1], selectBeforePseudoElement: true }, // 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({ baseSelector: "#id6", nb: 2, used: [0, 1] }); +} + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openRuleView(); + + for (const { baseSelector, nb, used, selectBeforePseudoElement } of TESTS) { + const onFontHighlighted = view.once("font-highlighted"); + + if (selectBeforePseudoElement) { + // Query the first children node to get the before pseudo element: + const baseNode = await getNodeFront(baseSelector, inspector); + const pseudoElement = (await inspector.walker.children(baseNode)) + .nodes[0]; + await selectNode(pseudoElement, inspector); + } else { + await selectNode(baseSelector, inspector); + } + await onFontHighlighted; + + const selector = !selectBeforePseudoElement + ? baseSelector + : `${baseSelector}::before`; + info(`Looking for fonts in font-family property for: <${selector}>`); + + const prop = getRuleViewProperty(view, selector, "font-family").valueSpan; + const 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" + ); + + let highlightedIndex = 0; + [...fonts].forEach((font, index) => { + if (font === highlighted[highlightedIndex]) { + is(index, used[highlightedIndex], "The right font is highlighted"); + highlightedIndex++; + } + }); + } +}); |