tools/perf/page_sets/tough_animation_cases/transform_transitions.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     #animatable {
   6       position: absolute;
   7       left: 0;
   8       top: 0;
   9       height: 100px;
  10       width: 100px;
  11       background-color: green;
  12       -webkit-border-radius: 10px;
  13       -webkit-transition: -webkit-transform 1s;
  14     }
  15
  16     #poster {
  17       font-family: 'Georgia', serif;
  18       font-size: 36px;
  19       font-weight: bold;
  20       text-align: center;
  21       margin-top: 28px;
  22     }
  23
  24     #text {
  25       position: absolute;
  26       left: 20px;
  27       top: 400px;
  28     }
  29
  30     #text > p {
  31       font-family: 'Verdana', serif;
  32       font-size: 12px;
  33       font-weight: bold;
  34     }
  35   </style>
  36   <script type="text/javascript">
  37     const initialValues = [
  38       "translate3d(100px, 100px, 0px)",
  39       "rotate3d(0, 1, 0, 0deg)",
  40       "scale3d(1, 1, 1)",
  41       "perspective(10000)",
  42       "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)",
  43       "skew(0deg, 0deg)"
  44     ];
  45
  46     const targetValues = [
  47       "translate3d(250px, 250px, 0px)",
  48       "rotate3d(0, 1, 0, 30deg)",
  49       "scale3d(2, 2, 2)",
  50       "perspective(200)",
  51       "matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)",
  52       "skew(10deg, 10deg)"
  53     ];
  54
  55     var i = 1;
  56     var iterations = Math.pow(2, initialValues.length);
  57     var oldStyle = "";
  58
  59     // For the buffon needle experiment below.
  60     var hits = 0;
  61     var trials = 0;
  62     var estimate = 0;
  63
  64     function triggerTransition()
  65     {
  66       var style = "";
  67       var elem = document.getElementById("animatable");
  68
  69       for (var j = 0; j < initialValues.length; ++j) {
  70         if (j > 0)
  71           style += " ";
  72
  73         var values = initialValues;
  74         if (Math.floor(i / Math.pow(2, j)) % 2 == 1)
  75           values = targetValues;
  76
  77         style += values[j];
  78       }
  79
  80       elem.style.webkitTransform = style;
  81       i++;
  82
  83       document.getElementById("from").innerHTML = "From:<br> " + oldStyle;
  84       document.getElementById("to").innerHTML = "To:<br> " + style;
  85       document.getElementById("estimate").innerHTML = "Buffon estimate of pi after " + trials.toString() + " needle drops:<br>" + estimate.toString();
  86
  87       oldStyle = style;
  88
  89       if (i < iterations)
  90         setTimeout(triggerTransition, 1000);
  91     }
  92
  93     function buffonStep()
  94     {
  95       for (var step = 0; step < 100000; ++step) {
  96         var x = 2.0 * Math.random();
  97         x = Math.min(x, 2.0 - x);
  98
  99         if (Math.cos(Math.PI * Math.random() * 0.5) > x)
 100           hits++;
 101
 102         trials++;
 103
 104         if (hits > 0)
 105           estimate = 2 * trials / hits;
 106       }
 107
 108       if (i < iterations)
 109         setTimeout(buffonStep, 0);
 110     }
 111
 112     function startExperiment()
 113     {
 114       triggerTransition();
 115       buffonStep();
 116     }
 117
 118     window.addEventListener('load', startExperiment, false);
 119   </script>
 120 </head>
 121 <body>
 122 <div id="animatable"><p id="poster">Hi!</p></div>
 123 <div id="text">
 124   <p id="from">From:</p>
 125   <p id="to">To:</p>
 126   <p id="estimate">Estimate:</p>
 127 </div>
 128 </body>
 129 </html>
 130