tools/perf/page_sets/key_silk_cases/pushState.html

   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;
   6 }
   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;
  15 }
  16 div.b {
  17   position: relative;
  18 }
  19 .b div {
  20   position: absolute;
  21   height: 25px;
  22   width: 25px;
  23   border-radius: 25px;
  24 }
  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);
  34 }
  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);
  41 }
  42 for (var i = 0; i < 1000; i++) {
  43   newdiv();
  44 }
  45
  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)';
  51 }
  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);
  59   }
  60 }
  61 step();
  62 </script>
  63
  64 <body>
  65 </html>