/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; // Test that classes can be toggled in the class panel add_task(async function () { await addTab("data:text/html;charset=utf-8,"); const { view } = await openRuleView(); info("Open the class panel"); view.showClassPanel(); info( "Click on class1 and check that the checkbox is unchecked and the DOM is updated" ); await toggleClassPanelCheckBox(view, "class1"); checkClassPanelContent(view, [ { name: "class1", state: false }, { name: "class2", state: true }, ]); let newClassName = await getContentPageElementAttribute("body", "class"); is(newClassName, "class2", "The class attribute has been updated in the DOM"); info("Click on class2 and check the same thing"); await toggleClassPanelCheckBox(view, "class2"); checkClassPanelContent(view, [ { name: "class1", state: false }, { name: "class2", state: false }, ]); newClassName = await getContentPageElementAttribute("body", "class"); is(newClassName, "", "The class attribute has been updated in the DOM"); info("Click on class2 and checks that the class is added again"); await toggleClassPanelCheckBox(view, "class2"); checkClassPanelContent(view, [ { name: "class1", state: false }, { name: "class2", state: true }, ]); newClassName = await getContentPageElementAttribute("body", "class"); is(newClassName, "class2", "The class attribute has been updated in the DOM"); info("And finally, click on class1 again and checks it is added again"); await toggleClassPanelCheckBox(view, "class1"); checkClassPanelContent(view, [ { name: "class1", state: true }, { name: "class2", state: true }, ]); newClassName = await getContentPageElementAttribute("body", "class"); is( newClassName, "class1 class2", "The class attribute has been updated in the DOM" ); });