This repository has been archived by the owner on Apr 23, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
scroll.html
223 lines (191 loc) · 17.1 KB
/
scroll.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
<title>A smooth scrolling page</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0,initial-scale=1.0, user-scalable=yes">
<!-- web smoothness snippet -->
<script src="../bin/web_smoothness.js"></script>
<!-- actual page contents follow -->
<script>
function sleep(ms) {
var start = Date.now();
while(Date.now() < start + ms);
}
maybeJankPending = false;
function didJankStateChange() {
if (maybeJankPending)
return;
setTimeout(maybeJank, 0);
maybeJankPending = true;
}
function maybeJank() {
maybeJankPending = false;
if (!document.querySelector('#jank').checked){
return;
}
console.time('jank');
sleep(4+Math.random() * 600);
console.timeEnd('jank');
setTimeout(maybeJank, Math.random(4));
};
</script>
<script>
var smoothnessMonitor;
var ignoreMonitorPaint = false;
function nonQuiesce() {
if (!smoothnessMonitor && !ignoreMonitorPaint)
smoothnessMonitor = new web_smoothness.Monitor(undefined, gotData);
else
web_smoothness.requestGotDataNotification(nonQuiesce);
ignoreMonitorPaint = false;
}
function gotData(data) {
if (!data || data.measuredTimeRange === undefined) {
smoothnessMonitor = undefined;
web_smoothness.requestGotDataNotification(nonQuiesce);
return;
}
ignoreMonitorPaint = true;
console.log(data);
document.querySelector('#durationValue').innerText = data.measuredTimeRange.toFixed(2);
if (web_smoothness.supportsFrameTimingEvents) {
var cpsf = data.drawsPerCommit;
var fps = data.drawIntervalMs;
fps = fps ? 1000 / fps : 0;
document.querySelector('#fpsValue').innerText = fps.toFixed(2);
document.querySelector('#cpsfValue').innerText = cpsf.toFixed(2);
} else {
var raf = data.rafIntervalMs;
raf = raf ? 1000 / raf : 0;
document.querySelector('#rafValue').innerText = raf.toFixed(2);
}
smoothnessMonitor = undefined;
web_smoothness.requestGotDataNotification(nonQuiesce);
}
document.addEventListener('DOMContentLoaded', function() {
if (window.location.search.indexOf('fps') !== -1) {
web_smoothness.requestGotDataNotification(nonQuiesce);
if(!web_smoothness.supportsFrameTimingEvents) {
window.setInterval(function() {
if(smoothnessMonitor)
smoothnessMonitor.end();
}, 500);
}
/* TODO(mpb):
* - make monitor
* - listen quiesce event
* - stop monitor get data
* update div with computd fps for scroll
*/
if (web_smoothness.supportsFrameTimingEvents) {
document.querySelector('#raf').style.display = 'none';
document.querySelector('#fps').style.display = 'initial';
document.querySelector('#cpsf').style.display = 'initial';
} else {
document.querySelector('#raf').style.display = 'initial';
document.querySelector('#fps').style.display = 'none';
document.querySelector('#cpsf').style.display = 'none';
}
}
});
</script>
<style>
#controls {
position: fixed;
width: 250px;
top: 10px;
left: 10px;
padding: 5px;
border: 2px solid black;
font-family: sans-serif;
font-size: 150%;
background-color: white;
}
#smoothness-info {
position: fixed;
background-color: white;
box-sizing: border-box;
display: flex;
top: 20px;
right: 20px;
width: 150px;
height: 75px;
will-change: transform;
transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
border: 1px solid black;
font-size: 12px;
line-height: 100%;
}
body {
margin-top: 80px;
}
</style>
</head>
<body>
<div id="controls">
<label>
<input id="jank" type="checkbox" onclick="didJankStateChange()">Jank</input>
</label>
</div>
<div id="smoothness-info">
<div style="position:static;padding:4px;line-height:120%">
<span>Duration: </span><span id="durationValue"></span><br/>
<span title='requestAnimationFrames per second' id="raf">RAF: </span>
<span id="rafValue"></span>
<span title='Frames drawn per second' id="fps">FPS: </span>
<span id="fpsValue"></span><br/>
<span title='Composites per source frame' id="cpsf">CPSF: </span>
<span id="cpsfValue"></span>
</div>
</div>
<h1>A few words of introduction</h1>
The goal of this page is to monitor frame rate while scrolling.
As you would expect, the jank checkbox introduces random jank via javascript.
</p>
Most mobile browsers handle scrolling off thread, as well as some desktop
browsers. In those systems, onScroll fires after the scroll happens, and it is
typically throttled, making it very hard to determine the actual quality-of-experience taht the user is having.
Moreover, even though when a user is scrolling, we may want to measure FPS,
when the user isn't scrolling [happens way more often!] we dont' want to be
burning CPU cycles on our measurement harness.
A good FPS monitoring API should report the smoothness of this page when scrolling, and leave the CPU completely idle otherwise.
An even better monitoring API will tell us how often the main thread is able
to participate in the frames, so that the quality of any scroll-coupled effects (eg <a href="http://src.chromium.org/chrome/trunk/src/tools/perf/page_sets/key_silk_cases/inbox_app.html?stress_hidey_bars">hidey bars</a>) can be monitored.
<h1>And now for some gratuituously repeated letters!</h1>
aaaaaaaaa aaaaaaaa aaaaaaaa aaaaaa. aa aaaaaa aaaaaaaaaa aaaa aaa aaaaaaa aa. aaaaaa aaa aaa. aaaaa aaaaaaaa aaaaa, aaaaaaaa aaa aa aaaaaa, aaaaaaaaaaa aaa, aaaaa aaaaaaa, aa aaaaaaa. aaaaaaa aaa aaaaaa. aaaaaaa aaaaaaaaa aaaaaa aa aaaaaa. aaaaaa aaaa aaaaaaaaaa. aaaaaaaaaaaaa aaaaa aaaa aaaaaa aaaa aaaaaa' aaaaaaa. aaaaaaaa aa aa aaaaaa aa aaaaaa aaaaaa aaa aaa aa a aaaaaa, aaaaaaaaaaaaaa aaaaaa aaaa aaaa. aaaaaa aaaaa aaaaaaa. aaaaaaa aaaa ... aaa! aaaaaaaa aaaaaaa aaaaa aa aa, aaaaaaaaaa aaaaa, aaaaaaaa a, aaaaaaaa a, aaaaa aaaaa.
<p>
aaaaaa aaaaa aaaaaaaaaaaa aaa aaaa aaaa aaaa'a aaa aaaaaaa aaaaaaaaaaaa. aaaa aaaaaaaaa, aa aaaaaaa aaa aaaaaa aa aaaaaa, aaa aaaa a-aaaaaa aaaaa aaaaaaaaa aaaaaaa, aaaaa aaaaa aaaaa aa aaa aaaaaaa, aaaa aaaaaaa aaaaaa aaaaa aaaaaa aaaaaaaa aaaaaa. aaa aaaaa aaa aa aaaaaa aaaaaa aaaaaa aaaaa aaaaaaaaa. aaaaaaaaaaaa aaaaaaa aaaa, a'a aa aaa aaaaaaa aaaaa, aaaaa aaa aaaa aaa aaaa, aaa aaa aaa aaaaa, aaaaa. aaa aaa aa a aaaaaa aaaaaaa aaaaa. aaaa aaaaaaaa aaaaaaaa aaaaaaa aaaaa, aaaaaaaaaaaa aaaa ... aaa! aaaaa aaaaa. aaa aaaa aaaaaa aaaa. aa aaaaa aaa aaaa. aaaaaaaaaaaaa aaaaa aaaaaaa aaaaa aaaaaaaa aaaa aa aaaaaaa. aa aaaaaaaaa aaaaaaa aaaaaa aaaaaaa aaaa. aaaaa aaa aaaa aaaaaa aaaa. aaaa aa aaaa aaaaa aa aaaaaaa aa aaaaaa aaaaaaa aaaaaaaa. aaaaaaaa aaaaaa aaaaa aaaa aaaa aaaaaaaa aaaaaaaaaaa. aaaaaaaaaaa aaaaaaa aaa, aaaaaaaaaaa aaaaa aa aaa, aaaa aaaaa aa aaaa, aaaa, aaaa'a aaa aaaaaaa aaaa, aaaaa aaaaa. aaa aaaaaa aaaaaaa aaaa aa aaaaa aaaaaaa aaaaaa. aaaaaaaaa aaaaaaa aa aaaaaa aaaaaaaaaaa aaaa aaaa aaaaa aa aaaa aaaa aaaaaaa.
<p>
aa aaaaaa' aaaaaaa aa aaaaaa aaaaaaaaaaa aaaaaa aaa. aaaaaa aa aa aaaaaa. aaaaa aaaaaaaaa. aaaaaaaa aaaa'a aaa aaaaaaa aaaaa a aaaa aa aaaaaaa aaa aaaaaa aa aaaaaa, aaa aaaa a-aaaaaa aaaaaaaa. aaaaaa aa aaaa aa aaaaaaa aa aaaaaa. aaaaaa aaaaaa aaa aa aaa aaaaaa. aaaa'a aaa aaaaaaa a aa aa aaaaaa aaaaa aaaa aaaaaaa aaaaa aaaaa. aaaaaaaaaa aaa aaaaaa. aaaaaaa aaaaaaaa a'a aa aaa aaaaaaa aaaaaa aaaaaaaa. aa aaaa aaaaa. aaaaaa aaaa aa aaa aaaaa aa aaaaaa aaaaaaaaa aaaaaaaa. aaaaa aaaaaaaa, aaaa aaaaa aa aaaa aaaaaaa aaaaaaa, aaaa aaa aaa aaaaaa aaaaaa, aaaaaa aaaaaa aa aaaaaaaa aa aaaaa aaa. aaaaaa aaa aaaaaa. aaaa aaaaaaaaaa aa aaaaaaa aaaaa aaaaaaaaa aa aaaaaaaa aaaa aaaaaaaaa aaa aaa aa a aaaaaa aaaaaaaa aaaaa aa aaaa aaaaaaa aaaaa; aa aaaaaaa aaaaaaaa, aaaa aaaa aaaaaa aaaaaaaa aaaaaaa aaaaa aa aa, aa aaaaaaa aaaaaaa aaaaaa, a aa aa aaaaaa aaaa aaaaaa aaaaaaa aaaaaaa. aaaaaa aaaa aaaaaaa aaaaa aaaaa. aaaaaa aaaaa aa aaa. aaa aaaaaa aaaaaa aaaaaaaaaaaa aaa aaaa aaaaaaaaa aaaaaa' aaaaaaaaaa aaaa aaa aaaaaaa aa, aaaaaaaa aaa aaaaaa aaaaaa. aaaaaaa aaaaaaaa aaaaaaa aaaaa aa aa aaaaaa aaaaaaaaa aaaaaaaa aaaaaa aaaaaaa aaaaaa. aaaaaaaa aaa aa.
<p>
<img src="images/soccerball.png" width="100px" height="100px">
<p>
aaaaaa aaaaaa aaaaa aaaaa. aaaaaaaaa aaaaa aa aaa, aaaaa aa aaaaaaaa aaaaaa, aaaaa aaaaaaa aaaaaaaaaaaa aaaaa aaa aaaa, aaaaaa aaaaaaaaaaaa aaaaaaaa aaaaa aaaaaa aaa aaaaaa. aaa aaaaaaaaaa aaaaaaaaa aaaaa. aa aa aaaaaa aaaaaa aaaaaa aaaaaaaaaaa. aaa aaaa aaaaaa aaaaaa aaaaaa aaaa. aaaaaaaaaaaaa aaaa aaaa, aaaaaaaaaa aaaaa, aaaa aaaaaaaaaa aaaa, aaaaaaaa aaaaa, aaaaa. aaaa ... aaa! aaaaaaa aaaaaaaaaa aaaaaa. aa aaaa aaaaaaaaa aaaaaaa aaaaa aaaaa. aaaaa aa aaa aaaa aaaa aaaaaaa aa aaaaa aaaaa aaaaaaaaaaa. aaaaa aaaaaaaaa aaaaaaa aaaaaaa. aaaaa aaaaaaaaaa, aaaaa a aaaaaaa aaaaa aaaaa, aaaa aaaaaaaa aaaaaaa aaaa, aaaaaaaaa aaaaaaaaaaaa aaaa'a aaa aaaaaaa aaaaa aaaaaa aaaaaaaa. aaaa aaaaaaaaa aaaa ... aaa! aaa aaaaaa. aaaaaa aa aaaaaa aaaaaaa aaaaa aa aaa aaaaaaaaaa aa aaaaa aaaaa. aaaaaaaaa aaaaa aaaaaaaa aaaaaa. aaaaaa aaaaa. aaaaaaaaaaa aa aaaa.
<p>
aaa aaaa aaa aaaa aa aaaaaa. aaaaaa aaaa aa aaaaaaa aa aaaaaa aaaaaaa aaaa aaaaaaaaaa. aaaaaaaa aaaaaaa, aaaaaaa aaaaa aaaaaaaaa aa aaaaa, aaaaaa aaaa aaaaaaaaa aaa, aaa aaaaaaaaaaa aaaa aaaaaa aa aaaa. aaaaa aaaaa aaaaaaaa. aaaaaaaaaaaaa aa aaaa aaaaaaaa. aaa aaaaaa aaaa aaaaaaaaaaa aaaaa. aaaaaaa aaaaa aaaaaa, aa aaaaa aaaaa, aaaaaaaa aaaaaaa, aaaaaa aaaaaaa, aaaa. aaa aaaaaaaa. aaaa aaaa. aaaaaaaaaaaa aa aaaaa aaa aaaaaa aaaa aaaaaaaaaa aaaaaa. aaaaaaa aaaaaaaaa aaaaaaaaa aaaaaa aaaa . aaaaaaaa aaaaaa aaaa aaaaaaaa.
<p>
aaaaaa aaaaa aaaaaaaaaaaa aaa aaaa aaaa aaaa'a aaa aaaaaaa aaaaaaaaaaaa. aaaa aaaaaaaaa, aa aaaaaaa aaa aaaaaa aa aaaaaa, aaa aaaa a-aaaaaa aaaaa aaaaaaaaa aaaaaaa, aaaaa aaaaa aaaaa aa aaa aaaaaaa, aaaa aaaaaaa aaaaaa aaaaa aaaaaa aaaaaaaa aaaaaa. aaa aaaaa aaa aa aaaaaa aaaaaa aaaaaa aaaaa aaaaaaaaa. aaaaaaaaaaaa aaaaaaa aaaa, a'a aa aaa aaaaaaa aaaaa, aaaaa aaa aaaa aaa aaaa, aaa aaa aaa aaaaa, aaaaa. aaa aaa aa a aaaaaa aaaaaaa aaaaa. aaaa aaaaaaaa aaaaaaaa aaaaaaa aaaaa, aaaaaaaaaaaa aaaa ... aaa! aaaaa aaaaa. aaa aaaa aaaaaa aaaa. aa aaaaa aaa aaaa. aaaaaaaaaaaaa aaaaa aaaaaaa aaaaa aaaaaaaa aaaa aa aaaaaaa. aa aaaaaaaaa aaaaaaa aaaaaa aaaaaaa aaaa. aaaaa aaa aaaa aaaaaa aaaa. aaaa aa aaaa aaaaa aa aaaaaaa aa aaaaaa aaaaaaa aaaaaaaa. aaaaaaaa aaaaaa aaaaa aaaa aaaa aaaaaaaa aaaaaaaaaaa. aaaaaaaaaaa aaaaaaa aaa, aaaaaaaaaaa aaaaa aa aaa, aaaa aaaaa aa aaaa, aaaa, aaaa'a aaa aaaaaaa aaaa, aaaaa aaaaa. aaa aaaaaa aaaaaaa aaaa aa aaaaa aaaaaaa aaaaaa. aaaaaaaaa aaaaaaa aa aaaaaa aaaaaaaaaaa aaaa aaaa aaaaa aa aaaa aaaa aaaaaaa.
<p>
aa aaaaaa' aaaaaaa aa aaaaaa aaaaaaaaaaa aaaaaa aaa. aaaaaa aa aa aaaaaa. aaaaa aaaaaaaaa. aaaaaaaa aaaa'a aaa aaaaaaa aaaaa a aaaa aa aaaaaaa aaa aaaaaa aa aaaaaa, aaa aaaa a-aaaaaa aaaaaaaa. aaaaaa aa aaaa aa aaaaaaa aa aaaaaa. aaaaaa aaaaaa aaa aa aaa aaaaaa. aaaa'a aaa aaaaaaa a aa aa aaaaaa aaaaa aaaa aaaaaaa aaaaa aaaaa. aaaaaaaaaa aaa aaaaaa. aaaaaaa aaaaaaaa a'a aa aaa aaaaaaa aaaaaa aaaaaaaa. aa aaaa aaaaa. aaaaaa aaaa aa aaa aaaaa aa aaaaaa aaaaaaaaa aaaaaaaa. aaaaa aaaaaaaa, aaaa aaaaa aa aaaa aaaaaaa aaaaaaa, aaaa aaa aaa aaaaaa aaaaaa, aaaaaa aaaaaa aa aaaaaaaa aa aaaaa aaa. aaaaaa aaa aaaaaa. aaaa aaaaaaaaaa aa aaaaaaa aaaaa aaaaaaaaa aa aaaaaaaa aaaa aaaaaaaaa aaa aaa aa a aaaaaa aaaaaaaa aaaaa aa aaaa aaaaaaa aaaaa; aa aaaaaaa aaaaaaaa, aaaa aaaa aaaaaa aaaaaaaa aaaaaaa aaaaa aa aa, aa aaaaaaa aaaaaaa aaaaaa, a aa aa aaaaaa aaaa aaaaaa aaaaaaa aaaaaaa. aaaaaa aaaa aaaaaaa aaaaa aaaaa. aaaaaa aaaaa aa aaa. aaa aaaaaa aaaaaa aaaaaaaaaaaa aaa aaaa aaaaaaaaa aaaaaa' aaaaaaaaaa aaaa aaa aaaaaaa aa, aaaaaaaa aaa aaaaaa aaaaaa. aaaaaaa aaaaaaaa aaaaaaa aaaaa aa aa aaaaaa aaaaaaaaa aaaaaaaa aaaaaa aaaaaaa aaaaaa. aaaaaaaa aaa aa.
<p>
aaaaaa aaaaaa aaaaa aaaaa. aaaaaaaaa aaaaa aa aaa, aaaaa aa aaaaaaaa aaaaaa, aaaaa aaaaaaa aaaaaaaaaaaa aaaaa aaa aaaa, aaaaaa aaaaaaaaaaaa aaaaaaaa aaaaa aaaaaa aaa aaaaaa. aaa aaaaaaaaaa aaaaaaaaa aaaaa. aa aa aaaaaa aaaaaa aaaaaa aaaaaaaaaaa. aaa aaaa aaaaaa aaaaaa aaaaaa aaaa. aaaaaaaaaaaaa aaaa aaaa, aaaaaaaaaa aaaaa, aaaa aaaaaaaaaa aaaa, aaaaaaaa aaaaa, aaaaa. aaaa ... aaa! aaaaaaa aaaaaaaaaa aaaaaa. aa aaaa aaaaaaaaa aaaaaaa aaaaa aaaaa. aaaaa aa aaa aaaa aaaa aaaaaaa aa aaaaa aaaaa aaaaaaaaaaa. aaaaa aaaaaaaaa aaaaaaa aaaaaaa. aaaaa aaaaaaaaaa, aaaaa a aaaaaaa aaaaa aaaaa, aaaa aaaaaaaa aaaaaaa aaaa, aaaaaaaaa aaaaaaaaaaaa aaaa'a aaa aaaaaaa aaaaa aaaaaa aaaaaaaa. aaaa aaaaaaaaa aaaa ... aaa! aaa aaaaaa. aaaaaa aa aaaaaa aaaaaaa aaaaa aa aaa aaaaaaaaaa aa aaaaa aaaaa. aaaaaaaaa aaaaa aaaaaaaa aaaaaa. aaaaaa aaaaa. aaaaaaaaaaa aa aaaa.
<p>
aaa aaaa aaa aaaa aa aaaaaa. aaaaaa aaaa aa aaaaaaa aa aaaaaa aaaaaaa aaaa aaaaaaaaaa. aaaaaaaa aaaaaaa, aaaaaaa aaaaa aaaaaaaaa aa aaaaa, aaaaaa aaaa aaaaaaaaa aaa, aaa aaaaaaaaaaa aaaa aaaaaa aa aaaa. aaaaa aaaaa aaaaaaaa. aaaaaaaaaaaaa aa aaaa aaaaaaaa. aaa aaaaaa aaaa aaaaaaaaaaa aaaaa. aaaaaaa aaaaa aaaaaa, aa aaaaa aaaaa, aaaaaaaa aaaaaaa, aaaaaa aaaaaaa, aaaa. aaa aaaaaaaa. aaaa aaaa. aaaaaaaaaaaa aa aaaaa aaa aaaaaa aaaa aaaaaaaaaa aaaaaa. aaaaaaa aaaaaaaaa aaaaaaaaa aaaaaa aaaa . aaaaaaaa aaaaaa aaaa aaaaaaaa.
<p>
aaaaaa aaaaa aaaaaaaaaaaa aaa aaaa aaaa aaaa'a aaa aaaaaaa aaaaaaaaaaaa. aaaa aaaaaaaaa, aa aaaaaaa aaa aaaaaa aa aaaaaa, aaa aaaa a-aaaaaa aaaaa aaaaaaaaa aaaaaaa, aaaaa aaaaa aaaaa aa aaa aaaaaaa, aaaa aaaaaaa aaaaaa aaaaa aaaaaa aaaaaaaa aaaaaa. aaa aaaaa aaa aa aaaaaa aaaaaa aaaaaa aaaaa aaaaaaaaa. aaaaaaaaaaaa aaaaaaa aaaa, a'a aa aaa aaaaaaa aaaaa, aaaaa aaa aaaa aaa aaaa, aaa aaa aaa aaaaa, aaaaa. aaa aaa aa a aaaaaa aaaaaaa aaaaa. aaaa aaaaaaaa aaaaaaaa aaaaaaa aaaaa, aaaaaaaaaaaa aaaa ... aaa! aaaaa aaaaa. aaa aaaa aaaaaa aaaa. aa aaaaa aaa aaaa. aaaaaaaaaaaaa aaaaa aaaaaaa aaaaa aaaaaaaa aaaa aa aaaaaaa. aa aaaaaaaaa aaaaaaa aaaaaa aaaaaaa aaaa. aaaaa aaa aaaa aaaaaa aaaa. aaaa aa aaaa aaaaa aa aaaaaaa aa aaaaaa aaaaaaa aaaaaaaa. aaaaaaaa aaaaaa aaaaa aaaa aaaa aaaaaaaa aaaaaaaaaaa. aaaaaaaaaaa aaaaaaa aaa, aaaaaaaaaaa aaaaa aa aaa, aaaa aaaaa aa aaaa, aaaa, aaaa'a aaa aaaaaaa aaaa, aaaaa aaaaa. aaa aaaaaa aaaaaaa aaaa aa aaaaa aaaaaaa aaaaaa. aaaaaaaaa aaaaaaa aa aaaaaa aaaaaaaaaaa aaaa aaaa aaaaa aa aaaa aaaa aaaaaaa.
<p>
aa aaaaaa' aaaaaaa aa aaaaaa aaaaaaaaaaa aaaaaa aaa. aaaaaa aa aa aaaaaa. aaaaa aaaaaaaaa. aaaaaaaa aaaa'a aaa aaaaaaa aaaaa a aaaa aa aaaaaaa aaa aaaaaa aa aaaaaa, aaa aaaa a-aaaaaa aaaaaaaa. aaaaaa aa aaaa aa aaaaaaa aa aaaaaa. aaaaaa aaaaaa aaa aa aaa aaaaaa. aaaa'a aaa aaaaaaa a aa aa aaaaaa aaaaa aaaa aaaaaaa aaaaa aaaaa. aaaaaaaaaa aaa aaaaaa. aaaaaaa aaaaaaaa a'a aa aaa aaaaaaa aaaaaa aaaaaaaa. aa aaaa aaaaa. aaaaaa aaaa aa aaa aaaaa aa aaaaaa aaaaaaaaa aaaaaaaa. aaaaa aaaaaaaa, aaaa aaaaa aa aaaa aaaaaaa aaaaaaa, aaaa aaa aaa aaaaaa aaaaaa, aaaaaa aaaaaa aa aaaaaaaa aa aaaaa aaa. aaaaaa aaa aaaaaa. aaaa aaaaaaaaaa aa aaaaaaa aaaaa aaaaaaaaa aa aaaaaaaa aaaa aaaaaaaaa aaa aaa aa a aaaaaa aaaaaaaa aaaaa aa aaaa aaaaaaa aaaaa; aa aaaaaaa aaaaaaaa, aaaa aaaa aaaaaa aaaaaaaa aaaaaaa aaaaa aa aa, aa aaaaaaa aaaaaaa aaaaaa, a aa aa aaaaaa aaaa aaaaaa aaaaaaa aaaaaaa. aaaaaa aaaa aaaaaaa aaaaa aaaaa. aaaaaa aaaaa aa aaa. aaa aaaaaa aaaaaa aaaaaaaaaaaa aaa aaaa aaaaaaaaa aaaaaa' aaaaaaaaaa aaaa aaa aaaaaaa aa, aaaaaaaa aaa aaaaaa aaaaaa. aaaaaaa aaaaaaaa aaaaaaa aaaaa aa aa aaaaaa aaaaaaaaa aaaaaaaa aaaaaa aaaaaaa aaaaaa. aaaaaaaa aaa aa.
<p>
<img src="images/soccerball.png" width="100px" height="100px">
<p>
aaaaaa aaaaaa aaaaa aaaaa. aaaaaaaaa aaaaa aa aaa, aaaaa aa aaaaaaaa aaaaaa, aaaaa aaaaaaa aaaaaaaaaaaa aaaaa aaa aaaa, aaaaaa aaaaaaaaaaaa aaaaaaaa aaaaa aaaaaa aaa aaaaaa. aaa aaaaaaaaaa aaaaaaaaa aaaaa. aa aa aaaaaa aaaaaa aaaaaa aaaaaaaaaaa. aaa aaaa aaaaaa aaaaaa aaaaaa aaaa. aaaaaaaaaaaaa aaaa aaaa, aaaaaaaaaa aaaaa, aaaa aaaaaaaaaa aaaa, aaaaaaaa aaaaa, aaaaa. aaaa ... aaa! aaaaaaa aaaaaaaaaa aaaaaa. aa aaaa aaaaaaaaa aaaaaaa aaaaa aaaaa. aaaaa aa aaa aaaa aaaa aaaaaaa aa aaaaa aaaaa aaaaaaaaaaa. aaaaa aaaaaaaaa aaaaaaa aaaaaaa. aaaaa aaaaaaaaaa, aaaaa a aaaaaaa aaaaa aaaaa, aaaa aaaaaaaa aaaaaaa aaaa, aaaaaaaaa aaaaaaaaaaaa aaaa'a aaa aaaaaaa aaaaa aaaaaa aaaaaaaa. aaaa aaaaaaaaa aaaa ... aaa! aaa aaaaaa. aaaaaa aa aaaaaa aaaaaaa aaaaa aa aaa aaaaaaaaaa aa aaaaa aaaaa. aaaaaaaaa aaaaa aaaaaaaa aaaaaa. aaaaaa aaaaa. aaaaaaaaaaa aa aaaa.
<p>
aaa aaaa aaa aaaa aa aaaaaa. aaaaaa aaaa aa aaaaaaa aa aaaaaa aaaaaaa aaaa aaaaaaaaaa. aaaaaaaa aaaaaaa, aaaaaaa aaaaa aaaaaaaaa aa aaaaa, aaaaaa aaaa aaaaaaaaa aaa, aaa aaaaaaaaaaa aaaa aaaaaa aa aaaa. aaaaa aaaaa aaaaaaaa. aaaaaaaaaaaaa aa aaaa aaaaaaaa. aaa aaaaaa aaaa aaaaaaaaaaa aaaaa. aaaaaaa aaaaa aaaaaa, aa aaaaa aaaaa, aaaaaaaa aaaaaaa, aaaaaa aaaaaaa, aaaa. aaa aaaaaaaa. aaaa aaaa. aaaaaaaaaaaa aa aaaaa aaa aaaaaa aaaa aaaaaaaaaa aaaaaa. aaaaaaa aaaaaaaaa aaaaaaaaa aaaaaa aaaa . aaaaaaaa aaaaaa aaaa aaaaaaaa.
</div>
</body>