Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / tools / perf / page_sets / key_silk_cases / pushState.html
blobdd7402571ca883ac50b75a33463a3caf707120b8
1 <!doctype html><html><meta charset=utf-8>
2 <meta name = "viewport" content = "width = device-width, user-scalable = no">
3 <style>
4 body {
5 width: 300px;
7 div.o {
8 height: 50px;
9 width: 50px;
10 border-radius: 50px;
11 position: absolute;
12 left: 150px; top: 50px;
13 background: red;
14 -webkit-transform-origin: 25px 100px;
16 div.b {
17 position: relative;
19 .b div {
20 position: absolute;
21 height: 25px;
22 width: 25px;
23 border-radius: 25px;
25 </style>
26 <body>
27 <div class=b></div>
28 <div class=o></div>
29 <script>
30 var count=0;
31 function rnd(x) {
32 count++;
33 return Math.floor(Math.abs(Math.cos(count)) * x);
35 function newdiv() {
36 var d = document.createElement('div');
37 d.style.top = rnd(350) + 'px';
38 d.style.left = rnd(275) + 'px';
39 d.style.background = 'rgb(' + rnd(255) + ',' + rnd(255) + ',' + rnd(255) + ')';
40 document.querySelector('.b').appendChild(d);
42 for (var i = 0; i < 1000; i++) {
43 newdiv();
46 a = 0;
47 n = 0;
48 d = document.querySelector('.o');
49 function update(a) {
50 d.style.webkitTransform = 'rotate3d(0,0,1,' + a + 'deg)';
52 function step() {
53 a = (a + 3) % 360;
54 update(a);
55 window.requestAnimationFrame(step);
56 if (a == 0) {
57 n++;
58 history.pushState(n, n, '/pushstate/' + n);
61 step();
62 </script>
64 <body>
65 </html>