--- a/testing/talos/talos/test.py
+++ b/testing/talos/talos/test.py
@@ -834,16 +834,17 @@ class a11yr(PageloaderTest):
class perf_reftest(PageloaderTest):
"""
Style perf-reftest a set of tests where the result is the difference of base vs ref pages
"""
base_vs_ref = True # compare the two test pages with eachother and report comparison
tpmanifest = '${talos}/tests/perf-reftest/perf_reftest.manifest'
tpcycles = 1
tppagecycles = 10
+ tptimeout = 30000
gecko_profile_interval = 1
gecko_profile_entries = 2000000
filters = filter.ignore_first.prepare(5) + filter.median.prepare()
unit = 'ms'
lower_is_better = True
alert_threshold = 5.0
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/coalesce-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<style>
+.x { color: yellow; }
+</style>
+<script src="util.js"></script>
+<script>
+function set_class(n) {
+ let child = n.firstChild;
+ while (child) {
+ set_class(child);
+ child = child.nextSibling;
+ }
+ n.className = "x";
+}
+window.onload = function() {
+ let root = build_dom(50000, "div");
+ document.body.appendChild(root);
+ flush_style(root);
+ set_class(root);
+ perf_start();
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/dep-check-1-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let s = "";
+ s += ".x";
+ for (let j = 0; j < 100; j++) {
+ s += "[y~=v" + j + "]";
+ }
+ s += " { background-color: yellow; }";
+ var style = document.createElement("style");
+ style.textContent = s;
+ document.head.appendChild(style);
+ let els = [];
+ for (let i = 0; i < 1000; i++) {
+ var el = document.createElement("e" + i);
+ el.className = "x";
+ let val = "";
+ for (let j = 0; j < 100; j++) {
+ val += "v" + j + " ";
+ }
+ el.setAttribute("y", val);
+ document.body.appendChild(el);
+ els.push(el);
+ }
+ flush_style(els[0]);
+ perf_start();
+ for (let el of els) {
+ el.className = "";
+ }
+ flush_style(els[0]);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/dep-check-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let s = "";
+ for (let i = 0; i < 50; i++) {
+ s += ".x";
+ for (let j = 0; j < 100; j++) {
+ s += "[y~=v" + j + "]";
+ }
+ s += " { background-color: yellow; }";
+ }
+ var style = document.createElement("style");
+ style.textContent = s;
+ document.head.appendChild(style);
+ let els = [];
+ for (let i = 0; i < 1000; i++) {
+ var el = document.createElement("e" + i);
+ el.className = "x";
+ let val = "";
+ for (let j = 0; j < 100; j++) {
+ val += "v" + j + " ";
+ }
+ el.setAttribute("y", val);
+ document.body.appendChild(el);
+ els.push(el);
+ }
+ flush_style(els[0]);
+ perf_start();
+ for (let el of els) {
+ el.className = "";
+ }
+ flush_style(els[0]);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/display-none-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>
+.root { display: none; }
+.x div { color: blue; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.className = "root";
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ document.body.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/display-none-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.root { display: none; }
+.x div { color: blue; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.className = "root";
+ root.appendChild(build_dom(100000, "div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ document.body.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/nth-index-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+.x:nth-child(200000) { background-color: yellow; }
+.x:nth-child(200000) div, .x:nth-child(200000) span { color: green; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.className = "root";
+ for (let i = 0; i < 200000; i++) {
+ root.appendChild(document.createElement("div"));
+ }
+ let last = root.lastChild;
+ last.appendChild(build_dom(5000, "div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ last.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/nth-index-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+.x:nth-of-type(200000) { background-color: yellow; }
+.x:nth-of-type(200000) div, .x:nth-of-type(200000) span { color: green; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.className = "root";
+ for (let i = 0; i < 200000; i++) {
+ root.appendChild(document.createElement("div"));
+ }
+ let last = root.lastChild;
+ last.appendChild(build_dom(5000, "div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ last.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/nth-index-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+.x:nth-child(200000) { background-color: yellow; }
+.x div, .x span { color: green; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.className = "root";
+ for (let i = 0; i < 200000; i++) {
+ root.appendChild(document.createElement("div"));
+ }
+ let last = root.lastChild;
+ last.appendChild(build_dom(5000, "div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ last.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/only-children-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+.x > div, .x > span { background-color: yellow; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.appendChild(build_dom(100000, "div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ root.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/only-children-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+.x > div, .x > span { background-color: yellow; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.appendChild(document.createElement("div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ root.firstChild.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
--- a/testing/talos/talos/tests/perf-reftest/perf_reftest.manifest
+++ b/testing/talos/talos/tests/perf-reftest/perf_reftest.manifest
@@ -1,6 +1,20 @@
# base_vs_ref is set in test.py for this test, so each of these lines is the base vs ref test pag
# both pages are run and then the results compared, the ultimate reported results are the comparisons.
# Each line is reported as a subtest like the other talos tests that have multiple lines of URLs.
& http://localhost/tests/perf-reftest/bloom-basic.html, http://localhost/tests/perf-reftest/bloom-basic-ref.html
& http://localhost/tests/perf-reftest/bloom-basic-2.html, http://localhost/tests/perf-reftest/bloom-basic-ref.html
& http://localhost/tests/perf-reftest/coalesce-1.html, http://localhost/tests/perf-reftest/coalesce-ref.html
+& http://localhost/tests/perf-reftest/coalesce-2.html, http://localhost/tests/perf-reftest/coalesce-ref.html
+& http://localhost/tests/perf-reftest/style-sharing.html, http://localhost/tests/perf-reftest/style-sharing-ref.html
+& http://localhost/tests/perf-reftest/style-sharing-style-attr.html, http://localhost/tests/perf-reftest/style-sharing-ref.html
+& http://localhost/tests/perf-reftest/display-none-1.html, http://localhost/tests/perf-reftest/display-none-1-ref.html
+& http://localhost/tests/perf-reftest/nth-index-1.html, http://localhost/tests/perf-reftest/nth-index-ref.html
+& http://localhost/tests/perf-reftest/nth-index-2.html, http://localhost/tests/perf-reftest/nth-index-ref.html
+& http://localhost/tests/perf-reftest/some-descendants-1.html, http://localhost/tests/perf-reftest/some-descendants-1-ref.html
+& http://localhost/tests/perf-reftest/only-children-1.html, http://localhost/tests/perf-reftest/only-children-ref.html
+& http://localhost/tests/perf-reftest/dep-check-1.html, http://localhost/tests/perf-reftest/dep-check-1-ref.html
+& http://localhost/tests/perf-reftest/slow-selector-1.html, http://localhost/tests/perf-reftest/slow-selector-1-ref.html
+& http://localhost/tests/perf-reftest/slow-selector-2.html, http://localhost/tests/perf-reftest/slow-selector-2-ref.html
+& http://localhost/tests/perf-reftest/style-attr-1.html, http://localhost/tests/perf-reftest/style-attr-1-ref.html
+& http://localhost/tests/perf-reftest/stop-cascade-1.html, http://localhost/tests/perf-reftest/stop-cascade-ref.html
+& http://localhost/tests/perf-reftest/stop-cascade-2.html, http://localhost/tests/perf-reftest/stop-cascade-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/slow-selector-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.first:empty { color: blue; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ let first = document.createElement("div");
+ first.className = "first";
+ first.appendChild(document.createElement("div"));
+ root.appendChild(first);
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ first.firstChild.remove();
+ flush_style(root);
+ perf_finish();
+};
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/slow-selector-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+.first:empty { color: blue; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ let first = document.createElement("div");
+ first.className = "first";
+ first.appendChild(document.createElement("div"));
+ root.appendChild(first);
+ root.appendChild(build_dom(64000, "div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ first.firstChild.remove();
+ flush_style(root);
+ perf_finish();
+};
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/slow-selector-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.first:first-child { color: blue; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.appendChild(document.createElement("div"));
+ let first = document.createElement("div");
+ first.className = "first";
+ root.appendChild(first);
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ root.firstChild.remove();
+ flush_style(root);
+ perf_finish();
+};
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/slow-selector-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+.first:first-child { color: blue; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let root = document.createElement("div");
+ root.appendChild(document.createElement("div"));
+ let first = document.createElement("div");
+ first.className = "first";
+ root.appendChild(first);
+ root.appendChild(build_dom(64000, "div"));
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ root.firstChild.remove();
+ flush_style(root);
+ perf_finish();
+};
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/some-descendants-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<style>
+.x { color: blue; }
+.y { background-color: green; }
+</style>
+<script src="util.js"></script>
+<script>
+function find_leftmost(e) {
+ while (e.firstChild) {
+ e = e.firstChild;
+ }
+ return e;
+}
+window.onload = function() {
+ document.head.appendChild(build_rule("div", 1, "{ color: blue; }", 100));
+ let root = document.createElement("div");
+ root.className = "root";
+ root.appendChild(build_dom(50000, "div"));
+ let leftmost = find_leftmost(root);
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ document.body.className = "x";
+ leftmost.className = "y";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/some-descendants-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<style>
+.x { color: blue; }
+.x .y { background-color: green; }
+</style>
+<script src="util.js"></script>
+<script>
+function find_leftmost(e) {
+ while (e.firstChild) {
+ e = e.firstChild;
+ }
+ return e;
+}
+window.onload = function() {
+ document.head.appendChild(build_rule("div", 1, "{ color: blue; }", 100));
+ let root = document.createElement("div");
+ root.className = "root";
+ root.appendChild(build_dom(50000, "div"));
+ let leftmost = find_leftmost(root);
+ leftmost.className = "y";
+ document.body.appendChild(root);
+ flush_style(root);
+ perf_start();
+ document.body.className = "x";
+ flush_style(root);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/stop-cascade-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+.x { background-color: yellow; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let roots = [];
+ for (let i = 0; i < 200; i++) {
+ let root = document.createElement("div");
+ root.appendChild(build_dom(1024, "div"));
+ roots.push(root);
+ document.body.appendChild(root);
+ }
+ flush_style(roots[0]);
+ perf_start();
+ for (x in ["x", "", "x"]) {
+ for (let root of roots) {
+ root.className = x;
+ }
+ }
+ flush_style(roots[0]);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/stop-cascade-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<style>
+div, span { border-left-color: inherit; }
+.x { background-color: yellow; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let roots = [];
+ for (let i = 0; i < 200; i++) {
+ let root = document.createElement("div");
+ root.appendChild(build_dom(1024, "div"));
+ roots.push(root);
+ document.body.appendChild(root);
+ }
+ flush_style(roots[0]);
+ perf_start();
+ for (x in ["x", "", "x"]) {
+ for (let root of roots) {
+ root.className = x;
+ }
+ }
+ flush_style(roots[0]);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/stop-cascade-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<style>
+.x { background-color: yellow; }
+</style>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ let roots = [];
+ for (let i = 0; i < 200; i++) {
+ let root = document.createElement("div");
+ roots.push(root);
+ document.body.appendChild(root);
+ }
+ flush_style(roots[0]);
+ perf_start();
+ for (x in ["x", "", "x"]) {
+ for (let root of roots) {
+ root.className = x;
+ }
+ }
+ flush_style(roots[0]);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/style-attr-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ var div = document.createElement("div");
+ document.body.appendChild(div);
+ flush_style(div);
+ perf_start();
+ div.style.color = "green";
+ flush_style(div);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/style-attr-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<script src="util.js"></script>
+<script>
+window.onload = function() {
+ document.head.appendChild(build_rule(".x[y~='e500']", 100000, "{ color: blue; }"));
+ var div = document.createElement("div");
+ div.className = "x";
+ let val = "";
+ for (let i = 0; i < 1000; i++) {
+ val += "e" + i + " ";
+ }
+ div.setAttribute("y", val);
+ document.body.appendChild(div);
+ flush_style(div);
+ perf_start();
+ div.style.color = "green";
+ flush_style(div);
+ perf_finish();
+};
+</script>
+<body></body>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/style-sharing-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="util.js"></script>
+ <script>
+window.onload = function() {
+ document.head.appendChild(build_rule("div", 1, "{ color: blue; } "));
+ let dom = build_dom(2000, "div");
+
+ flush_style();
+ perf_start();
+ document.body.appendChild(dom);
+ flush_style(dom);
+ perf_finish();
+}
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/style-sharing-style-attr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="util.js"></script>
+ <script>
+window.onload = function() {
+ document.head.appendChild(build_rule("caption div", 10000, "{ color: blue; } "));
+ let dom = build_dom(5000, "div", { elemNameLeft: "div", elemNameRight: "div",
+ attributes: { style: "background-color: yellow;"} });
+
+ flush_style();
+ perf_start();
+ document.body.appendChild(dom);
+ flush_style(dom);
+ perf_finish();
+}
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/talos/talos/tests/perf-reftest/style-sharing.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="util.js"></script>
+ <script>
+window.onload = function() {
+ document.head.appendChild(build_rule("caption div", 10000, "{ color: blue; } "));
+ let dom = build_dom(5000, "div", { elemNameLeft: "div", elemNameRight: "div" });
+
+ flush_style();
+ perf_start();
+ document.body.appendChild(dom);
+ flush_style(dom);
+ perf_finish();
+}
+ </script>
+ </head>
+ <body>
+ </body>
+</html>