third_party/WebKit/PerformanceTests/Layout/flexbox-with-stretch-layout.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../resources/runner.js"></script>
   5 <style>
   6
   7 #container {
   8     display: flex;
   9     flex-wrap: wrap;
  10 }
  11
  12 .byteBox {
  13     width: 9px;
  14     font-size: 9px;
  15 }
  16
  17 .inlineBlock {
  18     font-family: Ahem;
  19     width: 100%;
  20     display: inline-block;
  21 }
  22
  23 </style>
  24 </head>
  25 <body>
  26
  27 <div id="container" style="">
  28 </div>
  29
  30 </body>
  31 <script>
  32
  33 var nbsp = '\u00A0';
  34
  35 function setupTest()
  36 {
  37     var container = document.getElementById("container");
  38     for (var i = 0; i < 200; i++) {
  39         var div = document.createElement("div");
  40         div.className = "byteBox";
  41         var span = document.createElement("span");
  42         span.className = "inlineBlock";
  43         span.innerText = nbsp;
  44         div.appendChild(span);
  45         container.appendChild(div);
  46     };
  47     PerfTestRunner.forceLayoutOrFullFrame();
  48 };
  49
  50 setupTest();
  51
  52 var switcher = true;
  53
  54 function runTest()
  55 {
  56     var inlineBlocks = document.getElementsByClassName("inlineBlock");
  57     for (var i = inlineBlocks.length - 1; i >= 0; i--) {
  58         inlineBlocks[i].innerText = switcher ? " " : nbsp;
  59         PerfTestRunner.forceLayoutOrFullFrame();
  60     };
  61     switcher = !switcher;
  62 };
  63
  64 PerfTestRunner.measureRunsPerSecond({
  65     description: "Measures performance of flexbox containing many small elements with wrapping (column).",
  66     run: runTest
  67 });
  68 </script>
  69 </html>