diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js | |
parent | Initial commit. (diff) | |
download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js | 395 |
1 files changed, 395 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js new file mode 100644 index 0000000000..ce49501687 --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js @@ -0,0 +1,395 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that pseudoelements are displayed correctly in the rule view + +const TEST_URI = URL_ROOT + "doc_pseudoelement.html"; +const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements"; + +add_task(async function () { + await pushPref(PSEUDO_PREF, true); + + await addTab(TEST_URI); + const { inspector, view } = await openRuleView(); + + await testTopLeft(inspector, view); + await testTopRight(inspector, view); + await testBottomRight(inspector, view); + await testBottomLeft(inspector, view); + await testParagraph(inspector, view); + await testBody(inspector, view); + await testList(inspector, view); + await testDialogBackdrop(inspector, view); +}); + +async function testTopLeft(inspector, view) { + const id = "#topleft"; + const rules = await assertPseudoElementRulesNumbers(id, inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 2, + firstLetterRulesNb: 1, + selectionRulesNb: 1, + markerRulesNb: 0, + afterRulesNb: 1, + beforeRulesNb: 2, + }); + + const gutters = assertGutters(view); + + info("Make sure that clicking on the twisty hides pseudo elements"); + const expander = gutters[0].querySelector(".ruleview-expander"); + ok(!view.element.children[1].hidden, "Pseudo Elements are expanded"); + + expander.click(); + ok( + view.element.children[1].hidden, + "Pseudo Elements are collapsed by twisty" + ); + + expander.click(); + ok(!view.element.children[1].hidden, "Pseudo Elements are expanded again"); + + info( + "Make sure that dblclicking on the header container also toggles " + + "the pseudo elements" + ); + EventUtils.synthesizeMouseAtCenter( + gutters[0], + { clickCount: 2 }, + view.styleWindow + ); + ok( + view.element.children[1].hidden, + "Pseudo Elements are collapsed by dblclicking" + ); + + const elementRuleView = getRuleViewRuleEditor(view, 3); + + const elementFirstLineRule = rules.firstLineRules[0]; + const elementFirstLineRuleView = [ + ...view.element.children[1].children, + ].filter(e => { + return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule; + })[0]._ruleEditor; + + is( + convertTextPropsToString(elementFirstLineRule.textProps), + "color: orange", + "TopLeft firstLine properties are correct" + ); + + let onAdded = view.once("ruleview-changed"); + let firstProp = elementFirstLineRuleView.addProperty( + "background-color", + "rgb(0, 255, 0)", + "", + true + ); + await onAdded; + + onAdded = view.once("ruleview-changed"); + const secondProp = elementFirstLineRuleView.addProperty( + "font-style", + "italic", + "", + true + ); + await onAdded; + + is( + firstProp, + elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 2], + "First added property is on back of array" + ); + is( + secondProp, + elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 1], + "Second added property is on back of array" + ); + + is( + await getComputedStyleProperty(id, ":first-line", "background-color"), + "rgb(0, 255, 0)", + "Added property should have been used." + ); + is( + await getComputedStyleProperty(id, ":first-line", "font-style"), + "italic", + "Added property should have been used." + ); + is( + await getComputedStyleProperty(id, null, "text-decoration-line"), + "none", + "Added property should not apply to element" + ); + + await togglePropStatus(view, firstProp); + + is( + await getComputedStyleProperty(id, ":first-line", "background-color"), + "rgb(255, 0, 0)", + "Disabled property should now have been used." + ); + is( + await getComputedStyleProperty(id, null, "background-color"), + "rgb(221, 221, 221)", + "Added property should not apply to element" + ); + + await togglePropStatus(view, firstProp); + + is( + await getComputedStyleProperty(id, ":first-line", "background-color"), + "rgb(0, 255, 0)", + "Added property should have been used." + ); + is( + await getComputedStyleProperty(id, null, "text-decoration-line"), + "none", + "Added property should not apply to element" + ); + + onAdded = view.once("ruleview-changed"); + firstProp = elementRuleView.addProperty( + "background-color", + "rgb(0, 0, 255)", + "", + true + ); + await onAdded; + + is( + await getComputedStyleProperty(id, null, "background-color"), + "rgb(0, 0, 255)", + "Added property should have been used." + ); + is( + await getComputedStyleProperty(id, ":first-line", "background-color"), + "rgb(0, 255, 0)", + "Added prop does not apply to pseudo" + ); +} + +async function testTopRight(inspector, view) { + await assertPseudoElementRulesNumbers("#topright", inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + markerRulesNb: 0, + beforeRulesNb: 2, + afterRulesNb: 1, + }); + + const gutters = assertGutters(view); + + const expander = gutters[0].querySelector(".ruleview-expander"); + ok( + !view.element.firstChild.classList.contains("show-expandable-container"), + "Pseudo Elements remain collapsed after switching element" + ); + + expander.scrollIntoView(); + expander.click(); + ok( + !view.element.children[1].hidden, + "Pseudo Elements are shown again after clicking twisty" + ); +} + +async function testBottomRight(inspector, view) { + await assertPseudoElementRulesNumbers("#bottomright", inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + markerRulesNb: 0, + beforeRulesNb: 3, + afterRulesNb: 1, + }); +} + +async function testBottomLeft(inspector, view) { + await assertPseudoElementRulesNumbers("#bottomleft", inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + markerRulesNb: 0, + beforeRulesNb: 2, + afterRulesNb: 1, + }); +} + +async function testParagraph(inspector, view) { + const rules = await assertPseudoElementRulesNumbers( + "#bottomleft p", + inspector, + view, + { + elementRulesNb: 3, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 2, + markerRulesNb: 0, + beforeRulesNb: 0, + afterRulesNb: 0, + } + ); + + assertGutters(view); + + const elementFirstLineRule = rules.firstLineRules[0]; + is( + convertTextPropsToString(elementFirstLineRule.textProps), + "background: blue", + "Paragraph first-line properties are correct" + ); + + const elementFirstLetterRule = rules.firstLetterRules[0]; + is( + convertTextPropsToString(elementFirstLetterRule.textProps), + "color: red; font-size: 130%", + "Paragraph first-letter properties are correct" + ); + + const elementSelectionRule = rules.selectionRules[0]; + is( + convertTextPropsToString(elementSelectionRule.textProps), + "color: white; background: black", + "Paragraph first-letter properties are correct" + ); +} + +async function testBody(inspector, view) { + await testNode("body", inspector, view); + + const gutters = getGutters(view); + is(gutters.length, 0, "There are no gutter headings"); +} + +async function testList(inspector, view) { + await assertPseudoElementRulesNumbers("#list", inspector, view, { + elementRulesNb: 4, + firstLineRulesNb: 1, + firstLetterRulesNb: 1, + selectionRulesNb: 0, + markerRulesNb: 1, + beforeRulesNb: 1, + afterRulesNb: 1, + }); + + assertGutters(view); +} + +async function testDialogBackdrop(inspector, view) { + await assertPseudoElementRulesNumbers("dialog", inspector, view, { + elementRulesNb: 3, + backdropRules: 1, + }); + + assertGutters(view); +} + +function convertTextPropsToString(textProps) { + return textProps.map(t => t.name + ": " + t.value).join("; "); +} + +async function testNode(selector, inspector, view) { + await selectNode(selector, inspector); + const elementStyle = view._elementStyle; + return elementStyle; +} + +async function assertPseudoElementRulesNumbers( + selector, + inspector, + view, + ruleNbs +) { + const elementStyle = await testNode(selector, inspector, view); + + const rules = { + elementRules: elementStyle.rules.filter(rule => !rule.pseudoElement), + firstLineRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::first-line" + ), + firstLetterRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::first-letter" + ), + selectionRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::selection" + ), + markerRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::marker" + ), + beforeRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::before" + ), + afterRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::after" + ), + backdropRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::backdrop" + ), + }; + + is( + rules.elementRules.length, + ruleNbs.elementRulesNb || 0, + selector + " has the correct number of non pseudo element rules" + ); + is( + rules.firstLineRules.length, + ruleNbs.firstLineRulesNb || 0, + selector + " has the correct number of ::first-line rules" + ); + is( + rules.firstLetterRules.length, + ruleNbs.firstLetterRulesNb || 0, + selector + " has the correct number of ::first-letter rules" + ); + is( + rules.selectionRules.length, + ruleNbs.selectionRulesNb || 0, + selector + " has the correct number of ::selection rules" + ); + is( + rules.markerRules.length, + ruleNbs.markerRulesNb || 0, + selector + " has the correct number of ::marker rules" + ); + is( + rules.beforeRules.length, + ruleNbs.beforeRulesNb || 0, + selector + " has the correct number of ::before rules" + ); + is( + rules.afterRules.length, + ruleNbs.afterRulesNb || 0, + selector + " has the correct number of ::after rules" + ); + + return rules; +} + +function getGutters(view) { + return view.element.querySelectorAll(".ruleview-header"); +} + +function assertGutters(view) { + const gutters = getGutters(view); + + is(gutters.length, 3, "There are 3 gutter headings"); + is(gutters[0].textContent, "Pseudo-elements", "Gutter heading is correct"); + is(gutters[1].textContent, "This Element", "Gutter heading is correct"); + is( + gutters[2].textContent, + "Inherited from body", + "Gutter heading is correct" + ); + + return gutters; +} |