Bug 1432416 - Add talos/DAMP test for inspector with many CSS rules;r=ochameau
MozReview-Commit-ID: HJxw8i5kBLM
--- a/testing/talos/talos/tests/devtools/addon/content/damp.js
+++ b/testing/talos/talos/tests/devtools/addon/content/damp.js
@@ -742,21 +742,59 @@ async _consoleOpenWithCachedMessagesTest
};
await this.reloadPageAndLog(label + ".inspector", toolbox, onReload);
},
async customInspector() {
let url = CUSTOM_URL.replace(/\$TOOL/, "inspector");
await this.testSetup(url);
let toolbox = await this.openToolboxAndLog("custom.inspector", "inspector");
+
await this.reloadInspectorAndLog("custom", toolbox);
+ await this.selectNodeWithManyRulesAndLog(toolbox);
await this.closeToolboxAndLog("custom.inspector", toolbox);
await this.testTeardown();
},
+ /**
+ * Measure the time necessary to select a node and display the rule view when many rules
+ * match the element.
+ */
+ async selectNodeWithManyRulesAndLog(toolbox) {
+ let inspector = toolbox.getPanel("inspector");
+
+ // Local helper to select a node front and wait for the ruleview to be refreshed.
+ let selectNodeFront = (nodeFront) => {
+ let onRuleViewRefreshed = inspector.once("rule-view-refreshed");
+ inspector.selection.setNodeFront(nodeFront);
+ return onRuleViewRefreshed;
+ };
+
+ let initialNodeFront = inspector.selection.nodeFront;
+
+ // Retrieve the node front for the test node.
+ let root = await inspector.walker.getRootNode();
+ let referenceNodeFront = await inspector.walker.querySelector(root, ".no-css-rules");
+ let testNodeFront = await inspector.walker.querySelector(root, ".many-css-rules");
+
+ // Select test node and measure the time to display the rule view with many rules.
+ dump("Selecting .many-css-rules test node front\n");
+ let test = this.runTest("custom.inspector.manyrules.selectnode");
+ await selectNodeFront(testNodeFront);
+ test.done();
+
+ // Select reference node and measure the time to empty the rule view.
+ dump("Move the selection to a node with no rules\n");
+ test = this.runTest("custom.inspector.manyrules.deselectnode");
+ await selectNodeFront(referenceNodeFront);
+ test.done();
+
+ await selectNodeFront(initialNodeFront);
+ },
+
async openDebuggerAndLog(label, expectedSources, selectedFile, expectedText) {
const onLoad = async (toolbox, panel) => {
const dbg = await debuggerHelper.createContext(panel);
await debuggerHelper.waitForSources(dbg, expectedSources);
await debuggerHelper.selectSource(dbg, selectedFile);
await debuggerHelper.waitForText(dbg, selectedFile, expectedText);
await debuggerHelper.waitForMetaData(dbg);
};
--- a/testing/talos/talos/tests/devtools/addon/content/pages/custom/generate-inspector-html.js
+++ b/testing/talos/talos/tests/devtools/addon/content/pages/custom/generate-inspector-html.js
@@ -35,38 +35,58 @@ for (i = deep; i >= 1; i--) {
}
// Build the list of $n elements
let repeat = "";
for (i = 1; i <= n; i++) {
repeat += div + " " + i + " </div>\n";
}
+// Prepare CSS rules to add to the document <style>.
+let CSS_RULES_COUNT = 200;
+let manyCssRules = "";
+for (i = 0; i < CSS_RULES_COUNT; i++) {
+ manyCssRules += `
+ .many-css-rules {
+ font-size: ${i}px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }`;
+}
+
console.log(`
<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this file,
- You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!-- This file is a generated file, do not edit it directly.
- See generate-inspector-html.js for instructions to update this file -->
<html>
<head>
<meta charset="utf-8">
<title>Custom page for the Inspector</title>
<style>
div {
margin-left: 0.5em;
}
+ /* Styles for custom.inspector.manyrules tests */`);
+console.log(manyCssRules);
+console.log(`
</style>
</head>
<body>
<!-- <div> elements with ${deep} nested childs, all with ${attributes} attributes -->
<!-- The deepest <div> has id="deep"> -->
`);
console.log(tree);
console.log(`
<!-- ${n} <div> elements without any children -->
`);
console.log(repeat);
console.log(`
+<!-- Elements for custom.inspector.manyrules tests -->
+<div class="no-css-rules"></div>
+<div class="many-css-rules"></div>
</body>
</html>`);
--- a/testing/talos/talos/tests/devtools/addon/content/pages/custom/inspector.html
+++ b/testing/talos/talos/tests/devtools/addon/content/pages/custom/inspector.html
@@ -8,16 +8,1419 @@
<html>
<head>
<meta charset="utf-8">
<title>Custom page for the Inspector</title>
<style>
div {
margin-left: 0.5em;
}
+ /* Styles for custom.inspector.manyrules tests */
+
+ .many-css-rules {
+ font-size: 0px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 1px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 2px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 3px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 4px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 5px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 6px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 7px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 8px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 9px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 10px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 11px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 12px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 13px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 14px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 15px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 16px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 17px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 18px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 19px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 20px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 21px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 22px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 23px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 24px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 25px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 26px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 27px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 28px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 29px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 30px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 31px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 32px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 33px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 34px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 35px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 36px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 37px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 38px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 39px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 40px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 41px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 42px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 43px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 44px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 45px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 46px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 47px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 48px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 49px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 50px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 51px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 52px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 53px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 54px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 55px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 56px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 57px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 58px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 59px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 60px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 61px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 62px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 63px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 64px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 65px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 66px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 67px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 68px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 69px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 70px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 71px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 72px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 73px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 74px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 75px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 76px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 77px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 78px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 79px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 80px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 81px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 82px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 83px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 84px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 85px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 86px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 87px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 88px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 89px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 90px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 91px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 92px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 93px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 94px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 95px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 96px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 97px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 98px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 99px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 100px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 101px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 102px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 103px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 104px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 105px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 106px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 107px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 108px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 109px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 110px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 111px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 112px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 113px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 114px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 115px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 116px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 117px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 118px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 119px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 120px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 121px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 122px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 123px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 124px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 125px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 126px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 127px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 128px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 129px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 130px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 131px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 132px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 133px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 134px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 135px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 136px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 137px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 138px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 139px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 140px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 141px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 142px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 143px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 144px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 145px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 146px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 147px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 148px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 149px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 150px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 151px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 152px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 153px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 154px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 155px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 156px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 157px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 158px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 159px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 160px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 161px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 162px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 163px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 164px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 165px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 166px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 167px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 168px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 169px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 170px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 171px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 172px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 173px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 174px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 175px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 176px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 177px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 178px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 179px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 180px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 181px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 182px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 183px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 184px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 185px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 186px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 187px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 188px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 189px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 190px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 191px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 192px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 193px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 194px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 195px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 196px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 197px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 198px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+ .many-css-rules {
+ font-size: 199px;
+ margin: 10px;
+ padding: 10px;
+ font-family: Arial;
+ margin: 20px;
+ }
+
</style>
</head>
<body>
<!-- <div> elements with 50 nested childs, all with 50 attributes -->
<!-- The deepest <div> has id="deep"> -->
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 1
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 2
@@ -170,10 +1573,13 @@
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 45 </div>
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 46 </div>
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 47 </div>
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 48 </div>
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 49 </div>
<div data-a1="1" data-a2="2" data-a3="3" data-a4="4" data-a5="5" data-a6="6" data-a7="7" data-a8="8" data-a9="9" data-a10="10" data-a11="11" data-a12="12" data-a13="13" data-a14="14" data-a15="15" data-a16="16" data-a17="17" data-a18="18" data-a19="19" data-a20="20" data-a21="21" data-a22="22" data-a23="23" data-a24="24" data-a25="25" data-a26="26" data-a27="27" data-a28="28" data-a29="29" data-a30="30" data-a31="31" data-a32="32" data-a33="33" data-a34="34" data-a35="35" data-a36="36" data-a37="37" data-a38="38" data-a39="39" data-a40="40" data-a41="41" data-a42="42" data-a43="43" data-a44="44" data-a45="45" data-a46="46" data-a47="47" data-a48="48" data-a49="49" data-a50="50"> 50 </div>
+<!-- Elements for custom.inspector.manyrules tests -->
+<div class="no-css-rules"></div>
+<div class="many-css-rules"></div>
</body>
</html>