Source code

Revision control

Other Tools

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
5
<title>Paint-In-Time 2</title>
6
<style>
7
.gradient {
8
position: absolute;
9
width: 800px;
10
height: 600px;
11
opacity: 0.4;
12
}
13
</style>
14
</head>
15
<body>
16
<div id="grid">
17
</div>
18
</body>
19
<script>
20
21
// Only allow painting a tiny slice of the frame - here, 15ms.
22
var kFrameBudgetMs = 14;
23
var kDivCount = 10;
24
var kMaxTime = 20 * 1000;
25
26
var gCrazyCounter = 0;
27
var gIterations = 0;
28
var gStart;
29
var gDivs = [];
30
31
function GetColor() {
32
var color = GetColor.kColors[GetColor.Index];
33
GetColor.Index++;
34
GetColor.Index = (GetColor.Index % GetColor.kColors.length);
35
return color;
36
}
37
GetColor.Index = 0;
38
GetColor.kColors = ["red", "white", "green", "yellow", "orange", "brown"];
39
40
function RadialGradient(offset) {
41
this.colors = [GetColor(), GetColor()];
42
this.percents = [0 + offset, 20 + offset];
43
this.toStyle = function() {
44
return "radial-gradient(" +
45
this.colors[0] + " " + this.percents[0] + "%, " +
46
this.colors[1] + " " + this.percents[1] + "%)";
47
};
48
this.advance = function() {
49
this.percents[0] += 1;
50
this.percents[0] %= 80;
51
this.percents[1] = this.percents[0] + 20;
52
};
53
}
54
55
function runFrame() {
56
var start = performance.now();
57
58
// Spin loop.
59
while (performance.now() - start < kFrameBudgetMs)
60
gCrazyCounter++;
61
62
for (var i = 0; i < gDivs.length; i++) {
63
var info = gDivs[i];
64
info.gradient.advance();
65
info.element.style.background = info.gradient.toStyle();
66
}
67
68
gIterations++;
69
70
if (performance.now() - gStart >= kMaxTime) {
71
if (window.tpRecordTime) {
72
window.tpRecordTime(gIterations);
73
}
74
return;
75
}
76
77
window.requestAnimationFrame(runFrame);
78
}
79
80
function setup() {
81
var root = document.getElementById("grid");
82
for (var i = 0; i < kDivCount; i++) {
83
var gradient = new RadialGradient(i * 10 / 2);
84
85
var div = document.createElement("div");
86
var info = {};
87
info.element = div;
88
info.gradient = gradient;
89
90
div.classList.add("gradient");
91
div.style.left = "10px";
92
div.style.top = "10px";
93
div.style.background = gradient.toStyle();
94
root.appendChild(div);
95
96
gDivs.push(info);
97
}
98
}
99
100
function startTest() {
101
setup();
102
gStart = performance.now();
103
window.requestAnimationFrame(runFrame);
104
}
105
106
addEventListener("load", function() {
107
try {
108
TalosContentProfiler.resume("rasterflood_gradient.html loaded", true).then(() => {
109
startTest();
110
});
111
} catch (e) {
112
startTest();
113
}
114
});
115
</script>
116
<script type="text/javascript" src="resource://talos-powers/TalosContentProfiler.js"></script>
117
</html>