diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js new file mode 100644 index 0000000000..6a0b2d16cc --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js @@ -0,0 +1,123 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that keyframe rules and gutters are displayed correctly in the +// rule view. + +const TEST_URI = URL_ROOT + "doc_keyframeanimation.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, view } = await openRuleView(); + await testPacman(inspector, view); + await testBoxy(inspector, view); + await testMoxy(inspector, view); +}); + +async function testPacman(inspector, view) { + info("Test content and gutter in the keyframes rule of #pacman"); + + await assertKeyframeRules("#pacman", inspector, view, { + elementRulesNb: 2, + keyframeRulesNb: 2, + keyframesRules: ["pacman", "pacman"], + keyframeRules: ["100%", "100%"], + }); + + assertGutters(view, { + guttersNbs: 2, + gutterHeading: ["Keyframes pacman", "Keyframes pacman"], + }); +} + +async function testBoxy(inspector, view) { + info("Test content and gutter in the keyframes rule of #boxy"); + + await assertKeyframeRules("#boxy", inspector, view, { + elementRulesNb: 3, + keyframeRulesNb: 3, + keyframesRules: ["boxy", "boxy", "boxy"], + keyframeRules: ["10%", "20%", "100%"], + }); + + assertGutters(view, { + guttersNbs: 1, + gutterHeading: ["Keyframes boxy"], + }); +} + +async function testMoxy(inspector, view) { + info("Test content and gutter in the keyframes rule of #moxy"); + + await assertKeyframeRules("#moxy", inspector, view, { + elementRulesNb: 3, + keyframeRulesNb: 4, + keyframesRules: ["boxy", "boxy", "boxy", "moxy"], + keyframeRules: ["10%", "20%", "100%", "100%"], + }); + + assertGutters(view, { + guttersNbs: 2, + gutterHeading: ["Keyframes boxy", "Keyframes moxy"], + }); +} + +async function assertKeyframeRules(selector, inspector, view, expected) { + await selectNode(selector, inspector); + const elementStyle = view._elementStyle; + + const rules = { + elementRules: elementStyle.rules.filter(rule => !rule.keyframes), + keyframeRules: elementStyle.rules.filter(rule => rule.keyframes), + }; + + is( + rules.elementRules.length, + expected.elementRulesNb, + selector + " has the correct number of non keyframe element rules" + ); + is( + rules.keyframeRules.length, + expected.keyframeRulesNb, + selector + " has the correct number of keyframe rules" + ); + + let i = 0; + for (const keyframeRule of rules.keyframeRules) { + Assert.equal( + keyframeRule.keyframes.name, + expected.keyframesRules[i], + keyframeRule.keyframes.name + " has the correct keyframes name" + ); + Assert.equal( + keyframeRule.domRule.keyText, + expected.keyframeRules[i], + keyframeRule.domRule.keyText + " selector heading is correct" + ); + i++; + } +} + +function assertGutters(view, expected) { + const gutters = view.element.querySelectorAll(".ruleview-header"); + + is( + gutters.length, + expected.guttersNbs, + "There are " + gutters.length + " gutter headings" + ); + + let i = 0; + for (const gutter of gutters) { + is( + gutter.textContent, + expected.gutterHeading[i], + "Correct " + gutter.textContent + " gutter headings" + ); + i++; + } + + return gutters; +} |