third_party/WebKit/PerformanceTests/Layout/layers_overlap_3d.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>Performance tester for non-overlaping 3D layers</title>
   5         <style>
   6             .container {
   7                 width: 20px;
   8                 height: 20px;
   9                 border: 1px solid #AAA;
  10                 margin: 0 auto 5px;
  11                 -webkit-perspective: 400px;
  12             }
  13
  14             .box {
  15                 width: 100%;
  16                 height: 100%;
  17                 position: absolute;
  18                 background: red;
  19                 -webkit-transform: translateZ( -200px );
  20             }
  21         </style>
  22         <script src="../resources/runner.js"></script>
  23     </head>
  24     <body>
  25         <pre id="log"></pre>
  26         <script>
  27             function createTestFunction(count) {
  28                 return function() {
  29                     var container = document.createElement("div");
  30                     for(i = 0; i < count; ++i) {
  31                         var outer = document.createElement('div');
  32                         outer.className = 'container';
  33                         var inner = document.createElement('div');
  34                         inner.className = 'box';
  35                         outer.appendChild(inner);
  36                         container.appendChild(outer);
  37                     }
  38                     document.body.appendChild(container);
  39                     PerfTestRunner.forceLayoutOrFullFrame();
  40                     container.remove();
  41                 }
  42             }
  43             PerfTestRunner.measureTime({
  44                 description: "Measures performance of non-overlapping 3D layers.",
  45                 run: createTestFunction(5000)
  46             });
  47         </script>
  48     </body>
  49 </html>