Skip to content

Commit 22be606

Browse files
olahololahol
committed
more tests and benchmarks
1 parent 461e4ab commit 22be606

File tree

3 files changed

+366
-91
lines changed

3 files changed

+366
-91
lines changed

‎test/bench.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>scrollparent.js benchmark page</title>
6+
<meta charset="utf-8">
7+
</head>
8+
9+
10+
<body>
11+
<div style="overflow: scroll">
12+
<div>
13+
<div>
14+
<div>
15+
<div>
16+
<div>
17+
<div>
18+
<div>
19+
<div id="bench1">
20+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
21+
roots in a piece of classical Latin literature from 45 BC, making it over
22+
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
23+
College in Virginia, looked up one of the more obscure Latin words,
24+
consectetur, from a Lorem Ipsum passage, and going through the cites of
25+
the word in classical literature, discovered the undoubtable source. Lorem
26+
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
27+
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45
28+
BC. This book is a treatise on the theory of ethics, very popular during
29+
the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
30+
amet..", comes from a line in section 1.10.32.
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div style="overflow: hidden">
42+
<div>
43+
<div>
44+
<div>
45+
<div>
46+
<div>
47+
<div>
48+
<div>
49+
<div id="bench2">
50+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
51+
roots in a piece of classical Latin literature from 45 BC, making it over
52+
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
53+
College in Virginia, looked up one of the more obscure Latin words,
54+
consectetur, from a Lorem Ipsum passage, and going through the cites of
55+
the word in classical literature, discovered the undoubtable source. Lorem
56+
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
57+
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45
58+
BC. This book is a treatise on the theory of ethics, very popular during
59+
the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
60+
amet..", comes from a line in section 1.10.32.
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
71+
<script src="../scrollparent.js"></script>
72+
</body>
73+
74+
</html>

‎test/scrollparent.spec.js‎

Lines changed: 100 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,117 @@ test('test scrollparent behaviour', async ({ page }) => {
1111
await page.evaluate(() => {
1212
var top = document.scrollingElement || document.documentElement;
1313

14-
function equal(a, b, msg) {
14+
let counter = 0;
15+
function equal(a, b) {
16+
counter += 1;
1517
if (a !== b) {
16-
throw new Error(msg || "Page Error");
18+
throw new Error("Failed #" + counter);
1719
}
1820
}
1921

2022
function byId(id) {
2123
return document.getElementById(id);
2224
}
2325

24-
equal(Scrollparent(byId("test1")).className, "scroll");
26+
equal(Scrollparent(byId("test1")), byId("test1-target"));
2527

2628
equal(Scrollparent(byId("test2")), top);
2729
equal(Scrollparent(byId("test3")), top);
2830

29-
equal(Scrollparent(byId("test4")).className, "scroll-y");
30-
equal(Scrollparent(byId("test5")).className, "scroll-x");
31+
equal(Scrollparent(byId("test4")), byId("test4-target"));
32+
equal(Scrollparent(byId("test5")), byId("test5-target"));
33+
equal(Scrollparent(byId("test6")), byId("test6-target"));
34+
equal(Scrollparent(byId("test7")), byId("test7-target"));
35+
36+
equal(Scrollparent(byId("test8")), top);
37+
equal(Scrollparent(byId("test9")), top);
38+
39+
equal(Scrollparent(byId("test10")), byId("test10-target"));
40+
41+
equal(typeof Scrollparent("test1"), typeof undefined);
3142
});
3243
});
44+
45+
test('benchmark scrollparent', async ({ page }) => {
46+
const benchFile = resolve(__dirname, 'bench.html');
47+
48+
await page.goto(`file://${benchFile}`);
49+
50+
await expect(page).toHaveTitle('scrollparent.js benchmark page');
51+
52+
page.on("console", (msg) => {
53+
console.log(msg);
54+
});
55+
56+
await page.evaluate(() => {
57+
function byId(id) {
58+
return document.getElementById(id);
59+
}
60+
61+
function bench(name, n, fn) {
62+
const start = performance.now();
63+
for (let i = 0; i < n; i++) {
64+
fn(i)
65+
}
66+
console.log(`${name} took ${performance.now() - start}ms`);
67+
}
68+
69+
const node1 = byId("bench1");
70+
bench("bench1", 1000, () => {
71+
Scrollparent(node1);
72+
});
73+
74+
const node2 = byId("bench2");
75+
bench("bench2", 1000, () => {
76+
Scrollparent(node2);
77+
});
78+
79+
const nodes1 = [];
80+
for (let i = 0; i < 1000; i++) {
81+
const root = document.createElement("div");
82+
document.body.appendChild(root);
83+
root.style.overflow = i % 2 === 0 ? "scroll" : "hidden";
84+
85+
let current = root;
86+
for (let j = 0; j < i; j++) {
87+
const child = document.createElement("div");
88+
current.appendChild(child);
89+
current = child
90+
}
91+
92+
nodes1.push(current);
93+
}
94+
95+
// force style recompute
96+
getComputedStyle(nodes1[nodes1.length - 1], null).getPropertyValue("overflow");
97+
98+
bench("benchN1", nodes1.length, (i) => {
99+
Scrollparent(nodes1[i]);
100+
});
101+
102+
const nodes2 = [];
103+
for (let i = 0; i < 1000; i++) {
104+
const root = document.createElement("div");
105+
document.body.appendChild(root);
106+
107+
let current = root;
108+
for (let j = 0; j < i; j++) {
109+
const child = document.createElement("div");
110+
if (j === Math.floor(i / 2)) {
111+
child.style.overflow = "scroll";
112+
}
113+
114+
current.appendChild(child);
115+
current = child
116+
}
117+
118+
nodes2.push(current);
119+
}
120+
121+
getComputedStyle(nodes2[nodes2.length - 1], null).getPropertyValue("overflow");
122+
123+
bench("benchN2", nodes2.length, (i) => {
124+
Scrollparent(nodes2[i]);
125+
});
126+
});
127+
});

0 commit comments

Comments
 (0)