css_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;
}

@keyframes opacity_keyframes {
  0%   { opacity: 0.5; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.5; }
}

</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';
	}

  document.getElementById("myDiv0").style.animation = "opacity_keyframes 1s infinite"
}

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

</script>
<body id="body"></body>
</html>
chromium/chrome/test/data/perf/tough_compositor_cases/css_opacity_plus_n_layers.html
