mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 16:25:38 +00:00
Bug 1483929 - (Part 2) Update tests to account for removal of Rendered Fonts and Other Fonts, and addition of All Fonts accordccordions. r=gl
Depends on D3797 Differential Revision: https://phabricator.services.mozilla.com/D3799 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
b20600a9d1
commit
e6dfc46c7c
@ -19,6 +19,7 @@ support-files =
|
||||
[browser_fontinspector_copy-URL.js]
|
||||
skip-if = !e10s # too slow on !e10s, logging fully serialized actors (Bug 1446595)
|
||||
subsuite = clipboard
|
||||
[browser_fontinspector_all-fonts.js]
|
||||
[browser_fontinspector_edit-previews.js]
|
||||
[browser_fontinspector_editor-font-size-conversion.js]
|
||||
[browser_fontinspector_editor-values.js]
|
||||
@ -27,7 +28,6 @@ subsuite = clipboard
|
||||
[browser_fontinspector_family-unused.js]
|
||||
[browser_fontinspector_no-fonts.js]
|
||||
[browser_fontinspector_other-fonts.js]
|
||||
[browser_fontinspector_rendered-fonts.js]
|
||||
[browser_fontinspector_reveal-in-page.js]
|
||||
[browser_fontinspector_text-node.js]
|
||||
[browser_fontinspector_theme-change.js]
|
||||
|
@ -1,7 +1,6 @@
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
/* global getURL, getFamilyName */
|
||||
"use strict";
|
||||
|
||||
requestLongerTimeout(2);
|
||||
@ -19,10 +18,6 @@ add_task(async function() {
|
||||
await testDivFonts(inspector, viewDoc);
|
||||
});
|
||||
|
||||
function isRemote(fontLi) {
|
||||
return fontLi.querySelector(".font-origin").classList.contains("remote");
|
||||
}
|
||||
|
||||
async function testBodyFonts(inspector, viewDoc) {
|
||||
await selectNode("body", inspector);
|
||||
|
||||
|
@ -0,0 +1,70 @@
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
"use strict";
|
||||
|
||||
// Check that the font editor has a section for "All fonts" which shows all fonts
|
||||
// used on the page.
|
||||
|
||||
const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
|
||||
|
||||
add_task(async function() {
|
||||
await pushPref("devtools.inspector.fonteditor.enabled", true);
|
||||
const { view } = await openFontInspectorForURL(TEST_URI);
|
||||
const viewDoc = view.document;
|
||||
|
||||
const allFontsAccordion = getFontsAccordion(viewDoc);
|
||||
ok(allFontsAccordion, "There's an accordion in the panel");
|
||||
is(allFontsAccordion.textContent, "All fonts on page", "It has the right title");
|
||||
|
||||
await expandAccordion(allFontsAccordion);
|
||||
const allFontsEls = getAllFontsEls(viewDoc);
|
||||
|
||||
const FONTS = [{
|
||||
familyName: ["bar"],
|
||||
name: ["Ostrich Sans Medium"],
|
||||
remote: true,
|
||||
url: URL_ROOT + "ostrich-regular.ttf",
|
||||
}, {
|
||||
familyName: ["bar"],
|
||||
name: ["Ostrich Sans Black"],
|
||||
remote: true,
|
||||
url: URL_ROOT + "ostrich-black.ttf",
|
||||
}, {
|
||||
familyName: ["bar"],
|
||||
name: ["Ostrich Sans Black"],
|
||||
remote: true,
|
||||
url: URL_ROOT + "ostrich-black.ttf",
|
||||
}, {
|
||||
familyName: ["barnormal"],
|
||||
name: ["Ostrich Sans Medium"],
|
||||
remote: true,
|
||||
url: URL_ROOT + "ostrich-regular.ttf",
|
||||
}, {
|
||||
// On Linux, Arial does not exist. Liberation Sans is used instead.
|
||||
familyName: ["Arial", "Liberation Sans"],
|
||||
name: ["Arial", "Liberation Sans"],
|
||||
remote: false,
|
||||
url: "system",
|
||||
}, {
|
||||
// On Linux, Times New Roman does not exist. Liberation Serif is used instead.
|
||||
familyName: ["Times New Roman", "Liberation Serif"],
|
||||
name: ["Times New Roman", "Liberation Serif"],
|
||||
remote: false,
|
||||
url: "system",
|
||||
}];
|
||||
|
||||
is(allFontsEls.length, FONTS.length, "All fonts used are listed");
|
||||
|
||||
for (let i = 0; i < FONTS.length; i++) {
|
||||
const li = allFontsEls[i];
|
||||
const font = FONTS[i];
|
||||
|
||||
ok(font.name.includes(getName(li)), "The DIV font has the right name");
|
||||
info(getName(li));
|
||||
ok(font.familyName.includes(getFamilyName(li)), `font has the right family name`);
|
||||
info(getFamilyName(li));
|
||||
is(isRemote(li), font.remote, `font remote value correct`);
|
||||
is(getURL(li), font.url, `font url correct`);
|
||||
}
|
||||
});
|
@ -14,8 +14,10 @@ add_task(async function() {
|
||||
const { view, inspector } = await openFontInspectorForURL(TEST_URI);
|
||||
const viewDoc = view.document;
|
||||
await selectNode("div", inspector);
|
||||
await expandFontsAccordion(viewDoc);
|
||||
const allFontsEls = getAllFontsEls(viewDoc);
|
||||
const fontEl = allFontsEls[0];
|
||||
|
||||
const fontEl = getUsedFontsEls(viewDoc)[0];
|
||||
const linkEl = fontEl.querySelector(".font-origin");
|
||||
const iconEl = linkEl.querySelector(".copy-icon");
|
||||
|
||||
|
@ -14,7 +14,7 @@ add_task(async function() {
|
||||
const { view, inspector } = await openFontInspectorForURL(TEST_URI);
|
||||
const viewDoc = view.document;
|
||||
await selectNode("div", inspector);
|
||||
await expandOtherFontsAccordion(viewDoc);
|
||||
await expandFontsAccordion(viewDoc);
|
||||
|
||||
const previews = viewDoc.querySelectorAll("#font-container .font-preview");
|
||||
const initialPreviews = [...previews].map(p => p.src);
|
||||
|
@ -14,42 +14,23 @@ add_task(async function() {
|
||||
const viewDoc = view.document;
|
||||
await selectNode("div", inspector);
|
||||
|
||||
await expandOtherFontsAccordion(viewDoc);
|
||||
await expandFontsAccordion(viewDoc);
|
||||
info("Checking that the css font-face rule is collapsed by default");
|
||||
let fontEl = getOtherFontsEls(viewDoc)[0];
|
||||
let codeEl = fontEl.querySelector(".font-css-code");
|
||||
const fontEl = getAllFontsEls(viewDoc)[0];
|
||||
const codeEl = fontEl.querySelector(".font-css-code");
|
||||
is(codeEl.textContent, "@font-face {}", "The font-face rule is collapsed");
|
||||
|
||||
info("Expanding the rule by clicking on the expander icon");
|
||||
let onExpanded = BrowserTestUtils.waitForCondition(() => {
|
||||
const onExpanded = BrowserTestUtils.waitForCondition(() => {
|
||||
return codeEl.textContent === `@font-face {
|
||||
font-family: bar;
|
||||
src: url("ostrich-black.ttf");
|
||||
font-weight: bold;
|
||||
src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype");
|
||||
}`;
|
||||
}, "Waiting for the font-face rule 1");
|
||||
|
||||
let expander = fontEl.querySelector(".font-css-code .theme-twisty");
|
||||
const expander = fontEl.querySelector(".font-css-code .theme-twisty");
|
||||
expander.click();
|
||||
await onExpanded;
|
||||
|
||||
ok(true, "Font-face rule is now expanded");
|
||||
|
||||
info("Expanding another rule by clicking on the [...] icon instead");
|
||||
fontEl = getOtherFontsEls(viewDoc)[1];
|
||||
codeEl = fontEl.querySelector(".font-css-code");
|
||||
|
||||
onExpanded = BrowserTestUtils.waitForCondition(() => {
|
||||
return codeEl.textContent === `@font-face {
|
||||
font-family: bar;
|
||||
src: url("ostrich-black.ttf");
|
||||
font-weight: 800;
|
||||
}`;
|
||||
}, "Waiting for the font-face rule 2");
|
||||
|
||||
expander = fontEl.querySelector(".font-css-code .font-css-code-expander");
|
||||
expander.click();
|
||||
await onExpanded;
|
||||
|
||||
ok(true, "Font-face rule is now expanded too");
|
||||
});
|
||||
|
@ -11,29 +11,30 @@
|
||||
const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
|
||||
|
||||
add_task(async function() {
|
||||
await pushPref("devtools.inspector.fonteditor.enabled", true);
|
||||
// Disable font editor because the "other fonts" section does not show up in that mode.
|
||||
await pushPref("devtools.inspector.fonteditor.enabled", false);
|
||||
const { inspector, view } = await openFontInspectorForURL(TEST_URI);
|
||||
const viewDoc = view.document;
|
||||
|
||||
const otherFontsAccordion = getOtherFontsAccordion(viewDoc);
|
||||
const otherFontsAccordion = getFontsAccordion(viewDoc);
|
||||
ok(otherFontsAccordion, "There's an accordion in the panel");
|
||||
is(otherFontsAccordion.textContent, "Other fonts in page", "It has the right title");
|
||||
|
||||
await expandAccordion(otherFontsAccordion);
|
||||
let otherFontsEls = getOtherFontsEls(viewDoc);
|
||||
let allFontsEls = getAllFontsEls(viewDoc);
|
||||
|
||||
is(otherFontsEls.length, 1, "There is one font listed in the other fonts section");
|
||||
is(allFontsEls.length, 1, "There is one font listed in the other fonts section");
|
||||
// On Linux Times New Roman does not exist, Liberation Serif is used instead
|
||||
const name = getName(otherFontsEls[0]);
|
||||
const name = getName(allFontsEls[0]);
|
||||
ok(name === "Times New Roman" || name === "Liberation Serif",
|
||||
"The other font listed is the right one");
|
||||
|
||||
info("Checking that fonts of the current element aren't listed");
|
||||
await selectNode(".bold-text", inspector);
|
||||
await expandOtherFontsAccordion(viewDoc);
|
||||
otherFontsEls = getOtherFontsEls(viewDoc);
|
||||
await expandFontsAccordion(viewDoc);
|
||||
allFontsEls = getAllFontsEls(viewDoc);
|
||||
|
||||
for (const otherFontEl of otherFontsEls) {
|
||||
for (const otherFontEl of allFontsEls) {
|
||||
ok(![...getUsedFontsEls(viewDoc)].some(el => getName(el) === getName(otherFontEl)),
|
||||
"Other font isn't listed in the main fonts section");
|
||||
}
|
||||
|
@ -1,25 +0,0 @@
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
"use strict";
|
||||
|
||||
// Check that the font inspector has a section for "rendered fonts" and that section
|
||||
// contains the fonts used to render the content of the selected element.
|
||||
// Check that it's collapsed by default, but can be expanded.
|
||||
|
||||
const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
|
||||
|
||||
add_task(async function() {
|
||||
await pushPref("devtools.inspector.fonteditor.enabled", true);
|
||||
const { view } = await openFontInspectorForURL(TEST_URI);
|
||||
const viewDoc = view.document;
|
||||
|
||||
const renderedFontsAccordion = getRenderedFontsAccordion(viewDoc);
|
||||
ok(renderedFontsAccordion, "There's an accordion for rendered fonts in the panel");
|
||||
is(renderedFontsAccordion.textContent, "Rendered fonts", "It has the right title");
|
||||
|
||||
await expandAccordion(renderedFontsAccordion);
|
||||
const fontsEls = getRenderedFontsEls(viewDoc);
|
||||
|
||||
ok(fontsEls.length, "There are fonts listed in the rendered fonts section");
|
||||
});
|
@ -23,9 +23,9 @@ add_task(async function() {
|
||||
const viewDoc = view.document;
|
||||
|
||||
await selectNode(".normal-text", inspector);
|
||||
await expandOtherFontsAccordion(viewDoc);
|
||||
const otherFontsEls = getOtherFontsEls(viewDoc);
|
||||
const fontEl = otherFontsEls[0];
|
||||
await expandFontsAccordion(viewDoc);
|
||||
const allFontsEls = getAllFontsEls(viewDoc);
|
||||
const fontEl = allFontsEls[0];
|
||||
|
||||
// Store the original preview URI for later comparison.
|
||||
const originalURI = fontEl.querySelector(".font-preview").src;
|
||||
|
@ -27,7 +27,14 @@ selectNode = async function(node, inspector, reason) {
|
||||
const onInspectorUpdated = inspector.once("fontinspector-updated");
|
||||
const onEditorUpdated = inspector.once("fonteditor-updated");
|
||||
await _selectNode(node, inspector, reason);
|
||||
await Promise.all([onInspectorUpdated, onEditorUpdated]);
|
||||
|
||||
if (Services.prefs.getBoolPref("devtools.inspector.fonteditor.enabled")) {
|
||||
// Wait for both the font inspetor and font editor before proceeding.
|
||||
await Promise.all([onInspectorUpdated, onEditorUpdated]);
|
||||
} else {
|
||||
// Wait just for the font inspector.
|
||||
await onInspectorUpdated;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -101,17 +108,6 @@ function getUsedFontsEls(viewDoc) {
|
||||
return viewDoc.querySelectorAll("#font-editor .fonts-list li");
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the DOM element for the accordion widget that contains the fonts used to render the
|
||||
* current element.
|
||||
*
|
||||
* @param {document} viewDoc
|
||||
* @return {DOMNode}
|
||||
*/
|
||||
function getRenderedFontsAccordion(viewDoc) {
|
||||
return viewDoc.querySelectorAll("#font-container .accordion")[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the DOM element for the accordion widget that contains the fonts used elsewhere in
|
||||
* the document.
|
||||
@ -119,8 +115,8 @@ function getRenderedFontsAccordion(viewDoc) {
|
||||
* @param {document} viewDoc
|
||||
* @return {DOMNode}
|
||||
*/
|
||||
function getOtherFontsAccordion(viewDoc) {
|
||||
return viewDoc.querySelectorAll("#font-container .accordion")[1];
|
||||
function getFontsAccordion(viewDoc) {
|
||||
return viewDoc.querySelector("#font-container .accordion");
|
||||
}
|
||||
|
||||
/**
|
||||
@ -141,23 +137,13 @@ async function expandAccordion(accordion) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand the other fonts accordion.
|
||||
* Expand the fonts accordion.
|
||||
*
|
||||
* @param {document} viewDoc
|
||||
*/
|
||||
async function expandOtherFontsAccordion(viewDoc) {
|
||||
async function expandFontsAccordion(viewDoc) {
|
||||
info("Expanding the other fonts section");
|
||||
await expandAccordion(getOtherFontsAccordion(viewDoc));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all of the <li> elements for the fonts used to render the current element.
|
||||
*
|
||||
* @param {document} viewDoc
|
||||
* @return {Array}
|
||||
*/
|
||||
function getRenderedFontsEls(viewDoc) {
|
||||
return getRenderedFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
|
||||
await expandAccordion(getFontsAccordion(viewDoc));
|
||||
}
|
||||
|
||||
/**
|
||||
@ -166,8 +152,8 @@ function getRenderedFontsEls(viewDoc) {
|
||||
* @param {document} viewDoc
|
||||
* @return {Array}
|
||||
*/
|
||||
function getOtherFontsEls(viewDoc) {
|
||||
return getOtherFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
|
||||
function getAllFontsEls(viewDoc) {
|
||||
return getFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
|
||||
}
|
||||
|
||||
/**
|
||||
@ -234,6 +220,17 @@ function getPropertyValue(viewDoc, name) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a font element, check whether its font source is remote.
|
||||
*
|
||||
* @param {DOMNode} fontEl
|
||||
* The font element.
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function isRemote(fontEl) {
|
||||
return fontEl.querySelector(".font-origin").classList.contains("remote");
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for a predicate to return a result.
|
||||
*
|
||||
|
Loading…
Reference in New Issue
Block a user