132 lines
4.9 KiB
HTML
132 lines
4.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test for InactivePropertyHelper</title>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
|
|
<script type="application/javascript">
|
|
"use strict";
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
(async function() {
|
|
const { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs");
|
|
const { isPropertyUsed } = require("devtools/server/actors/utils/inactive-property-helper");
|
|
|
|
const INACTIVE_CSS_PREF = "devtools.inspector.inactive.css.enabled";
|
|
const CUSTOM_HIGHLIGHT_API = "dom.customHighlightAPI.enabled";
|
|
const TEXT_WRAP_BALANCE = "layout.css.text-wrap-balance.enabled";
|
|
const ALIGN_CONTENT_BLOCKS = "layout.css.align-content.blocks.enabled";
|
|
const TEXT_FRAGMENTS = "dom.text_fragments.enabled";
|
|
|
|
Services.prefs.setBoolPref(INACTIVE_CSS_PREF, true);
|
|
Services.prefs.setBoolPref(CUSTOM_HIGHLIGHT_API, true);
|
|
Services.prefs.setBoolPref(TEXT_WRAP_BALANCE, true);
|
|
Services.prefs.setBoolPref(ALIGN_CONTENT_BLOCKS, true);
|
|
Services.prefs.setBoolPref(TEXT_FRAGMENTS, true);
|
|
|
|
SimpleTest.registerCleanupFunction(() => {
|
|
Services.prefs.clearUserPref(INACTIVE_CSS_PREF);
|
|
Services.prefs.clearUserPref(CUSTOM_HIGHLIGHT_API);
|
|
Services.prefs.clearUserPref(TEXT_WRAP_BALANCE);
|
|
Services.prefs.clearUserPref(ALIGN_CONTENT_BLOCKS);
|
|
Services.prefs.clearUserPref(TEXT_FRAGMENTS);
|
|
});
|
|
|
|
const FOLDER = "./inactive-property-helper";
|
|
|
|
// Each file should `export default` an array of objects, representing each test case.
|
|
// A single test case is an object of the following shape:
|
|
// - {String} info: a summary of the test case
|
|
// - {String} property: the CSS property that should be tested
|
|
// - {String|undefined} tagName: the tagName of the element we're going to test.
|
|
// Optional only if there's a createTestElement property.
|
|
// - {Function|undefined} createTestElement: A function that takes a node as a parameter
|
|
// where elements used for the test case will
|
|
// be appended. The function should return the
|
|
// element that will be passed to
|
|
// isPropertyUsed.
|
|
// Optional only if there's a tagName property
|
|
// - {Array<String>} rules: An array of the rules that will be applied on the element.
|
|
// This can't be empty as isPropertyUsed need a rule.
|
|
// - {Integer|undefined} ruleIndex: If there are multiples rules in `rules`, the index
|
|
// of the one that should be tested in isPropertyUsed.
|
|
// - {Boolean} isActive: should the property be active (isPropertyUsed `used` result).
|
|
const testFiles = [
|
|
"align-content.mjs",
|
|
"border-image.mjs",
|
|
"column-span.mjs",
|
|
"cue-pseudo-element.mjs",
|
|
"first-letter-pseudo-element.mjs",
|
|
"first-line-pseudo-element.mjs",
|
|
"flex-grid-item-properties.mjs",
|
|
"float.mjs",
|
|
"gap.mjs",
|
|
"grid-container-properties.mjs",
|
|
"grid-with-absolute-properties.mjs",
|
|
"multicol-container-properties.mjs",
|
|
"highlight-pseudo-elements.mjs",
|
|
"margin-padding.mjs",
|
|
"max-min-width-height.mjs",
|
|
"place-items-content.mjs",
|
|
"placeholder-pseudo-element.mjs",
|
|
"positioned.mjs",
|
|
"replaced-element-properties.mjs",
|
|
"scroll-padding.mjs",
|
|
"vertical-align.mjs",
|
|
"table.mjs",
|
|
"table-cell.mjs",
|
|
"text-overflow.mjs",
|
|
"text-wrap.mjs",
|
|
"width-height-ruby.mjs",
|
|
].map(file => `${FOLDER}/${file}`);
|
|
|
|
// Import all the test cases
|
|
const tests =
|
|
(await Promise.all(testFiles.map(f => import(f).then(data => data.default)))).flat();
|
|
|
|
for (const {
|
|
info: summary,
|
|
property,
|
|
tagName,
|
|
createTestElement,
|
|
rules,
|
|
ruleIndex,
|
|
isActive,
|
|
expectedMsgId,
|
|
} of tests) {
|
|
// Create an element which will contain the test elements.
|
|
const main = document.createElement("main");
|
|
document.firstElementChild.appendChild(main);
|
|
|
|
// Apply the CSS rules to the document.
|
|
const style = document.createElement("style");
|
|
main.append(style);
|
|
for (const dataRule of rules) {
|
|
style.sheet.insertRule(dataRule);
|
|
}
|
|
const rule = style.sheet.cssRules[ruleIndex || 0];
|
|
|
|
// Create the test elements
|
|
let el;
|
|
if (createTestElement) {
|
|
el = createTestElement(main);
|
|
} else {
|
|
el = document.createElement(tagName);
|
|
main.append(el);
|
|
}
|
|
|
|
const { used, msgId } = isPropertyUsed(el, getComputedStyle(el), rule, property);
|
|
ok(used === isActive, summary);
|
|
if (expectedMsgId) {
|
|
is(msgId, expectedMsgId, `${summary} - returned expected msgId`);
|
|
}
|
|
|
|
main.remove();
|
|
}
|
|
SimpleTest.finish();
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|