Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that a declaration's inactive state doesn't linger on its previous state when
// the declaration it depends on changes. Bug 1593944, Bug 2017242
const TEST_URI = `
<style>
div {
justify-content: center;
/*! display: flex */
}
h1 {
position-area: center;
}
:where(h1) {
/*!position: absolute*/
}
</style>
<h1>Inactive CSS update</h1>
<div>`;
add_task(async function () {
// needed to reproduce the original issue from Bug 2017242
await pushPref("devtools.inspector.activeSidebar", "computedview");
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("div", inspector);
const justifyContent = { "justify-content": "center" };
const justifyItems = { "justify-items": "center" };
const displayFlex = { display: "flex" };
const displayGrid = { display: "grid" };
info("Enable display:flex and check that justify-content becomes active");
await checkDeclarationIsInactive(
view,
1,
justifyContent,
"inactive-css-not-grid-or-flex-container"
);
await toggleDeclaration(view, 1, displayFlex);
await checkDeclarationIsActive(view, 1, justifyContent);
info(
"Rename justify-content to justify-items and check that it becomes inactive"
);
await updateDeclaration(view, 1, justifyContent, justifyItems);
await checkDeclarationIsInactive(
view,
1,
justifyItems,
"inactive-css-not-grid-container"
);
info(
"Rename display:flex to display:grid and check that justify-items becomes active"
);
await updateDeclaration(view, 1, displayFlex, displayGrid);
await checkDeclarationIsActive(view, 1, justifyItems);
info("Check that position-area declaration is inactive");
await selectNode("h1", inspector);
await checkDeclarationIsInactive(
view,
1,
{ "position-area": "center" },
"inactive-css-not-absolutely-positioned-item"
);
info(
"Enable position:absolute and check that position-area is still inactive and that the tooltip has a different content"
);
await toggleDeclaration(view, 2, { position: "absolute" });
await checkDeclarationIsInactive(
view,
1,
{ "position-area": "center" },
"inactive-css-no-default-anchor"
);
});