Source code

Revision control

Other Tools

1
<!DOCTYPE html>
2
<html><head>
3
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4
<title>Paint-In-Time</title>
5
<style>
6
svg {
7
width: 600px;
8
height: 800px;
9
}
10
</style>
11
</head>
12
<body>
13
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
14
<defs>
15
<filter id="filter1">
16
<feGaussianBlur stdDeviation=".5"></feGaussianBlur>
17
</filter>
18
<filter id="filter2">
19
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur1"></feGaussianBlur>
20
<feSpecularLighting result="specOut" in="blur1" specularExponent="20" lighting-color="#cccccc">
21
<fePointLight x="50" y="50" z="1"></fePointLight>
22
</feSpecularLighting>
23
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
24
</filter>
25
</defs>
26
<g fill="none" stroke="blue" stroke-width="20" stroke-dasharray="1" class="rotating">
27
<rect x="50" y="50" width="80px" height="80px" fill="blue" id="rect1" opacity="0.25" filter="url(#filter2)" transform="rotate(202 64 64)">
28
</rect>
29
</g>
30
<g fill="none" stroke="red" stroke-width="20" lass="rotating">
31
<rect x="75" y="75" width="80px" height="80px" fill="blue" id="rect2" opacity="0.5" filter="url(#filter1)" transform="rotate(202 89 89)">
32
</rect>
33
</g>
34
<g fill="none" stroke="green" stroke-width="20" class="rotating">
35
<rect x="100" y="100" width="80px" height="80px" fill="green" id="rect3" opacity="0.75" filter="url(#filter1)" transform="rotate(202 114 114)">
36
</rect>
37
</g>
38
<g fill="none" stroke="yellow" stroke-width="20" stroke-dasharray="1" class="rotating">
39
<rect x="125" y="125" width="80px" height="80px" fill="green" id="rect4" opacity="1" filter="url(#filter2)" transform="rotate(202 139 139)">
40
</rect>
41
</g>
42
<g fill="none" stroke="pink" stroke-width="20" stroke-dasharray="1" class="rotating">
43
<rect x="75" y="125" width="80px" height="80px" fill="green" id="rect5" opacity="1" filter="url(#filter2)" transform="rotate(202 89 139)">
44
</rect>
45
</g>
46
</svg>
47
48
<script>
49
50
// Only allow painting a tiny slice of the frame - here, 15ms.
51
var kFrameBudgetMs = 14;
52
var kDegPerFrame = 1;
53
var kCurrentRotation = 0;
54
var kMaxIterations = 600;
55
var kMinSize = 80;
56
var kMaxSize = 200;
57
var kOpacityPerFrame = [0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05];
58
59
var gCrazyCounter = 0;
60
var gStart;
61
var gSizeChangePerFrame = 1;
62
var gCurrentSize = 50;
63
var gIterations = 0;
64
65
function runFrame() {
66
var start = performance.now();
67
68
// Spin loop.
69
while (performance.now() - start < kFrameBudgetMs)
70
gCrazyCounter++;
71
72
// Change rotation.
73
var elts = [
74
document.getElementById("rect1"),
75
document.getElementById("rect2"),
76
document.getElementById("rect3"),
77
document.getElementById("rect4"),
78
document.getElementById("rect5"),
79
];
80
81
kCurrentRotation = (kCurrentRotation + kDegPerFrame) % 360;
82
83
// Change size.
84
if (gCurrentSize >= kMaxSize)
85
gSizeChangePerFrame = -1;
86
else if (gCurrentSize <= kMinSize)
87
gSizeChangePerFrame = 1;
88
gCurrentSize += gSizeChangePerFrame;
89
90
for (var i = 0; i < elts.length; i++) {
91
var elt = elts[i];
92
93
elt.setAttribute("height", gCurrentSize + "px");
94
elt.setAttribute("width", gCurrentSize + "px");
95
96
var bb = elt.getBBox();
97
var x = bb.x + bb.width / 2;
98
var y = bb.y + bb.height / 2;
99
var origin = x + " " + y;
100
elt.setAttribute("transform", "rotate(" + kCurrentRotation + " " + origin + ")");
101
102
var opacity = parseFloat(window.getComputedStyle(elt).getPropertyValue("opacity"));
103
if (opacity + kOpacityPerFrame[i] >= 1.0) {
104
opacity = 1.0;
105
kOpacityPerFrame[i] = -kOpacityPerFrame[i];
106
} else if (opacity + kOpacityPerFrame[i] < 0.1) {
107
opacity = 1.0;
108
kOpacityPerFrame[i] = -kOpacityPerFrame[i];
109
}
110
elt.setAttribute("opacity", opacity);
111
}
112
113
if (gIterations >= kMaxIterations) {
114
var end = performance.now();
115
if (window.tpRecordTime) {
116
window.tpRecordTime(end - gStart, gStart);
117
}
118
if (parent.reportResults) {
119
parent.reportResults(end - gStart, gStart);
120
}
121
return;
122
}
123
124
window.requestAnimationFrame(runFrame);
125
gIterations++;
126
}
127
128
function startTest() {
129
gStart = performance.now();
130
window.requestAnimationFrame(runFrame);
131
}
132
133
addEventListener("load", function() {
134
try {
135
TalosContentProfiler.resume("rasterflood_svg.html loaded", true).then(() => {
136
startTest();
137
});
138
} catch (e) {
139
startTest();
140
}
141
});
142
</script>
143
<script type="text/javascript" src="resource://talos-powers/TalosContentProfiler.js"></script>
144
145
</body></html>