third_party/WebKit/PerformanceTests/Layout/flexbox-row-wrap.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../resources/runner.js"></script>
   5 </head>
   6 <body style="overflow-y: scroll">
   7
   8 <div id="flexbox" style="width: 300px; flex-wrap: wrap; justify-content: center; align-items: center">
   9     <div style="flex: 1 120px">1</div>
  10     <div style="flex: 2 auto">2<br>2</div>
  11     <div style="flex: 3 120px">3<br>3<br>3</div>
  12     <div style="flex: 4 auto">4<br>4<br>4<br>4</div>
  13     <div style="flex: 5 120px">5<br>5<br>5<br>5<br>5</div>
  14     <div style="flex: 6 auto">6<br>6<br>6<br>6<br>6<br>6</div>
  15     <div style="flex: 7 120px">7<br>7<br>7<br>7<br>7<br>7<br>7</div>
  16     <div style="flex: 8 auto">8<br>8<br>8<br>8<br>8<br>8<br>8<br>8</div>
  17     <div style="flex: 9 120px">9<br>9<br>9<br>9<br>9<br>9<br>9<br>9<br>9</div>
  18     <div style="flex: 10 auto">10<br>10<br>10<br>10<br>10<br>10<br>10<br>10<br>10</div>
  19 </div>
  20
  21 </body>
  22 <script>
  23 function runTest()
  24 {
  25     document.getElementById("flexbox").style.display = 'flex';
  26     PerfTestRunner.forceLayoutOrFullFrame();
  27     document.getElementById("flexbox").style.display = '';
  28     PerfTestRunner.forceLayoutOrFullFrame();
  29 }
  30
  31 PerfTestRunner.measureRunsPerSecond({
  32     description: "Measures performance of flexbox with wrapping (row).",
  33     run: runTest,
  34     done: function() {
  35         document.getElementById("flexbox").style.display = 'none';
  36     }
  37 });
  38 </script>
  39 </html>