/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test inactive grid properties.
const TEST_URI = `
browser_rules_inactive_css_grid.js
`;
const BEFORE = [
{
// Check first that the getting grid-related data about the node doesn't break.
// See bug 1576484.
selector: "html",
inactiveDeclarations: [
{
declaration: {
"grid-area": "foo",
},
ruleIndex: 1,
},
],
},
{
selector: "#self-aligned",
inactiveDeclarations: [
{
declaration: {
"align-self": "stretch",
},
ruleIndex: 1,
},
],
},
{
selector: ".item-1",
activeDeclarations: [
{
declarations: {
"grid-column-start": "1",
"grid-column-end": "3",
"grid-row-start": "1",
"grid-row-end": "auto",
},
ruleIndex: 1,
},
],
inactiveDeclarations: [
{
declaration: {
"flex-direction": "row",
},
ruleIndex: 1,
},
],
},
{
selector: "#abspos",
activeDeclarations: [
{
declarations: {
"grid-column": 2,
},
ruleIndex: 1,
},
],
},
{
selector: "#container",
activeDeclarations: [
{
declarations: {
display: "grid",
},
ruleIndex: 0,
},
{
declarations: {
width: "200px",
height: "100px",
border: "1px solid #000",
"column-gap": "10px",
"row-gap": "10px",
},
ruleIndex: 1,
},
],
inactiveDeclarations: [
{
declaration: {
"align-self": "start",
},
ruleIndex: 1,
},
],
},
];
const AFTER = [
{
activeDeclarations: [
{
declarations: {
display: "grid",
},
ruleIndex: 0,
},
{
declarations: {
width: "200px",
height: "100px",
border: "1px solid #000",
},
ruleIndex: 1,
},
],
inactiveDeclarations: [
{
declaration: {
"column-gap": "10px",
},
ruleIndex: 1,
},
{
declaration: {
"row-gap": "10px",
},
ruleIndex: 1,
},
{
declaration: {
"align-self": "start",
},
ruleIndex: 1,
},
],
},
{
selector: "#abspos",
inactiveDeclarations: [
{
declaration: {
"grid-column": 2,
},
ruleIndex: 1,
},
],
},
];
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, BEFORE);
// Toggle `display:grid` to disabled.
await toggleDeclaration(view, 0, {
display: "grid",
});
await view.once("ruleview-refreshed");
await runInactiveCSSTests(view, inspector, AFTER);
info("Toggle `display: grid` to enabled again.");
await selectNode("#container", inspector);
await toggleDeclaration(view, 0, {
display: "grid",
});
await runAbsPosGridElementTests(view, inspector);
});
/**
* Tests for absolute positioned elements in a grid.
*/
async function runAbsPosGridElementTests(view, inspector) {
info("Toggling `position: relative` to disabled.");
await toggleDeclaration(view, 1, {
position: "relative",
});
await runInactiveCSSTests(view, inspector, [
{
selector: "#abspos",
inactiveDeclarations: [
{
declaration: {
"grid-column": 2,
},
ruleIndex: 1,
},
],
},
]);
info("Toggling `position: relative` back to enabled.");
await selectNode("#container", inspector);
await toggleDeclaration(view, 1, {
position: "relative",
});
info("Toggling `position: absolute` on grid element to disabled.");
await selectNode("#abspos", inspector);
await toggleDeclaration(view, 1, {
position: "absolute",
});
await runInactiveCSSTests(view, inspector, [
{
selector: "#abspos",
inactiveDeclarations: [
{
declaration: {
"grid-column": 2,
},
ruleIndex: 1,
},
],
},
]);
}