browser_rules_inactive_css_display-justify.js

Enable keyboard shortcuts

/* vim: set ft=javascript ts=2 et sw=2 tw=80: */

/* Any copyright is dedicated to the Public Domain.

 http://creativecommons.org/publicdomain/zero/1.0/ */

"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

const TEST_URI = `

<style>

  div {

    justify-content: center;

    /*! display: flex */

</style>

<div>`;

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 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);

  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);

  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);

});