Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test css properties that are inactive on block-level elements.
const TEST_URI = `
<style>
#block {
border: 1px solid #000;
vertical-align: sub;
}
td {
vertical-align: super;
}
#flex {
display: inline-flex;
vertical-align: text-bottom;
}
main {
vertical-align: middle;
}
main::before {
content: 'hello';
vertical-align: middle;
height: 10px;
position: relative;
top: 20px;
}
</style>
<h1 style="vertical-align:text-bottom;">browser_rules_inactive_css_inline.js</h1>
<div id="block">Block</div>
<table>
<tr><td>A table cell</td></tr>
</table>
<div id="flex">Inline flex element</div>
<main></main>
`;
const TEST_DATA = [
{
selector: "h1",
inactiveDeclarations: [
{
declaration: { "vertical-align": "text-bottom" },
ruleIndex: 0,
},
],
},
{
selector: "#block",
inactiveDeclarations: [
{
declaration: { "vertical-align": "sub" },
ruleIndex: 1,
},
],
},
{
selector: "td",
activeDeclarations: [
{
declarations: { "vertical-align": "super" },
ruleIndex: 1,
},
],
},
{
selector: "#flex",
activeDeclarations: [
{
declarations: { "vertical-align": "text-bottom" },
ruleIndex: 1,
},
],
},
{
selector: "main",
activeDeclarations: [
{
declarations: { "vertical-align": "middle", top: "20px" },
// The ::before rule in the pseudo-element section
ruleIndex: [1, 0],
},
],
inactiveDeclarations: [
{
declaration: { height: "10px" },
// The ::before rule in the pseudo-element section
ruleIndex: [1, 0],
},
{
declaration: { "vertical-align": "middle" },
ruleIndex: 4,
},
],
},
{
// Select the "main::before" node
selectNode: async inspector => {
const node = await getNodeFront("main", inspector);
const children = await inspector.markup.walker.children(node);
const beforeElement = children.nodes[0];
await selectNode(beforeElement, inspector);
},
activeDeclarations: [
{
declarations: { "vertical-align": "middle", top: "20px" },
ruleIndex: 0,
},
],
inactiveDeclarations: [
{
declaration: { height: "10px" },
ruleIndex: 0,
},
],
},
];
add_task(async function () {
await pushPref("devtools.inspector.inactive.css.enabled", true);
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await runInactiveCSSTests(view, inspector, TEST_DATA);
});
add_task(async function () {
await pushPref("devtools.inspector.inactive.css.enabled", true);
await addTab(
"data:text/html;charset=utf-8," +
encodeURIComponent(`
<style>
button::before {
content: "Hello ";
position: relative;
top: 10px;
}
</style>
<button>World</button>`)
);
const { inspector, view } = await openRuleView();
info(
"First, select the button::before node, without selecting button before"
);
// It's important not to select "button" before selecting the pseudo element node,
// otherwise we won't trigger the codepath this is asserting.
const node = await getNodeFront("button", inspector);
const children = await inspector.markup.walker.children(node);
const beforeElement = children.nodes[0];
await selectNode(beforeElement, inspector);
// We also need to do an actual check to trigger the codepath
await checkDeclarationIsActive(view, 0, {
top: "10px",
});
info("Then select the button node");
await selectNode("button", inspector);
info("Set an inactive property on the element style");
const inlineStyleRuleIndex = 3;
await addProperty(view, inlineStyleRuleIndex, "left", "10px");
await checkDeclarationIsInactive(view, inlineStyleRuleIndex, {
left: "10px",
});
});