Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os == 'android'
- Manifest: devtools/server/tests/chrome/chrome.toml
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test for InactivePropertyHelper</title>
<script type="application/javascript">
"use strict";
SimpleTest.waitForExplicitFinish();
(async function() {
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";
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);
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);
});
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",
"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",
"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>