third_party/WebKit/PerformanceTests/Layout/layers_overlap_2d.html

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