js_opacity_plus_n_layers.html | Explore in Territory

<!DOCTYPE html>
<!--
Copyright 2018 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">

<style>


.quad{
  float:left;
  background: blue;
  margin: 2px;
  will-change: transform;
}

.quad > p {
  font-family: 'Georgia', serif;
  font-size: 6px;
  font-weight: bold;
  text-align: center;
}

.padding_quad{
  float:left;
  margin: 2px;
}

</style>
</head>
<script type="text/javascript" src="bench.js"></script>
<script type="text/javascript">

var qs = (function(a) {
  if (a == "") return {};
  var b = {};
  for (var i = 0; i < a.length; ++i)
  {
    var p=a[i].split('=', 2);
    if (p.length == 1)
      b[p[0]] = "";
    else
      b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
  }
  return b;
})(window.location.search.substr(1).split('&'));

function init() {
  var body = document.getElementById('body');
  var layer_size = 20;
  var layer_count = qs['layer_count'];
  var visible_layers = qs['visible_layers'];

  for (var i = 0; i < layer_count; i ++) {
    if (i == visible_layers) {
      var div = body.appendChild(document.createElement('div'));
      div.className = 'padding_quad'
      div.style.width = '100%';
      div.style.height = (window.innerHeight * 2) + 'px';
    }

    var div = body.appendChild(document.createElement('div'));
    div.id = 'myDiv' + i;
    div.className = 'quad';
    div.style.width = layer_size + 'px'
    div.style.height= layer_size + 'px'
    var number = div.appendChild(document.createElement('p'));
    number.textContent = i + 1;
    number.style.marginTop = (layer_size/2 - 3) + 'px';
  }

  bench.run(draw);
}

  // call init once the document is fully loaded
window.addEventListener('load', init, false);

function draw() {
  let opacity = document.getElementById("myDiv0").style.opacity * 100;
  opacity = 50 + ((opacity + 1) % 50);
  document.getElementById("myDiv0").style.opacity = opacity / 100;
};
</script>
<body id="body"></body>
</html>
chromium/chrome/test/data/perf/tough_compositor_cases/js_opacity_plus_n_layers.html
