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 { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs");
const { isPropertyUsed } = require("devtools/server/actors/utils/inactive-property-helper");
const { DocumentWalker } = require("devtools/server/actors/inspector/document-walker");
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",
"border-spacing.mjs",
"box-sizing.mjs",
"column-span.mjs",
"content-visibility.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",
"resize.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,
pseudoElement,
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);
// When checking a pseudo element, we need to retrieve it, walking the DOM from
// its "real" node.
if (pseudoElement) {
const walker = new DocumentWalker(
el,
el.ownerGlobal
);
const pseudoNodeName = `_moz_generated_content_${pseudoElement.replaceAll(":", "")}`;
for (let next = walker.firstChild(); next; next = walker.nextSibling()) {
if (next.nodeName === pseudoNodeName) {
el = next;
break;
}
}
}
}
const { used, msgId } = isPropertyUsed(el, getComputedStyle(el, pseudoElement), rule, property);
ok(used === isActive, summary);
if (expectedMsgId) {
is(msgId, expectedMsgId, `${summary} - returned expected msgId`);
}
main.remove();
}
SimpleTest.finish();
})();
</script>
</head>
<body></body>
</html>