blur_rotating_background.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<style type="text/css">

body {
  margin: 0;
  overflow: hidden;
}

.box {
  background-color: red;
  display: inline-block;
  margin: 5px;
  height: 100px;
  width: 100px;
}

/* Note the use of 'will-change' for all the background and foreground divs.
   This is to make it explicit that we want a separate compositor layer for each
   of these divs. */

#rotating-background {
  left: 0px;
  top: 0px;
  width: 800px;
  height: 600px;
  position: absolute;
  will-change: transform;
}

.foreground {
  backdrop-filter: blur(20px);
  background-color: rgba(0, 0, 100, 20%);
  position: absolute;
}

#left-to-right-foreground {
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  will-change: left, width, height;
}

#top-to-bottom-foreground {
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  will-change: top, width, height;
}

#rotating-foreground {
  left: 0px;
  top: 0px;
  width: 800px;
  height: 600px;
  will-change: transform;
  font-size: 72px;
}

</style>
<script type="text/javascript">

// There is a "warm-up" phase where we request warmUpFrames animation frames
// prior to setting readyToStart = true. The reason is that we were observing
// some long WaitForAck calls in the GPU process in the win-10-perf bots. This
// suggested some initial setup cost (like shader compilation).
var warmUp = true;
var readyToStart = false;
var animationDone = false;
var frame = 0;
const numFrames = 200;
const warmUpFrames = 25;

function animateRotatingBackground(frame) {
  const background = document.getElementById("rotating-background");
  background.style.transform = "rotate(" + frame + "deg)";
}

function animateLeftToRightForeground(frame) {
  const foreground = document.getElementById("left-to-right-foreground");
  if (frame < numFrames / 2) {
    foreground.style.left = (frame * 2 * 100 / numFrames) + "px";
    foreground.style.width = (frame * 2 * 100 / numFrames) + "%";
    foreground.style.height = (frame * 2 * 100 / numFrames) + "%";
  } else {
    foreground.style.left = ((numFrames - frame) * 2 * 100 / numFrames) + "px";
    foreground.style.width = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
    foreground.style.height = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
  }
}

function animateTopToBottomForeground(frame) {
  const foreground = document.getElementById("top-to-bottom-foreground");
  if (frame < numFrames / 2) {
    foreground.style.top = (frame * 2 * 100 / numFrames) + "px";
    foreground.style.width = (frame * 2 * 100 / numFrames) + "%";
    foreground.style.height = (frame * 2 * 100 / numFrames) + "%";
  } else {
    foreground.style.top = ((numFrames - frame) * 2 * 100 / numFrames) + "px";
    foreground.style.width = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
    foreground.style.height = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
  }
}

function animateRotatingForeground(frame) {
  const foreground = document.getElementById("rotating-foreground");
  foreground.style.transform = "rotate(" + (frame / 3) + "deg)";
}

function animateOneFrame() {
  frame++;
  animateRotatingBackground(frame);
  animateRotatingForeground(frame);
  animateLeftToRightForeground(frame);
  animateTopToBottomForeground(frame);

  if (warmUp && frame == warmUpFrames) {
    warmUp = false;
    readyToStart = true;
    return;
  }

  if (frame < numFrames) {
    window.requestAnimationFrame(animateOneFrame);
  } else {
    animationDone = true;
  }
}

window.onload = function() {
  animateOneFrame();
}

</script>
</head>
<body>
<div id="rotating-background">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="foreground" id="rotating-foreground">
  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D E F G H I J K L M
  N O P Q R S T U V W X Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  A B C
</div>
<div class="foreground" id="left-to-right-foreground"></div>
<div class="foreground" id="top-to-bottom-foreground"></div>
</body>
</html>
chromium/tools/perf/page_sets/backdrop_filter_cases/blur_rotating_background.html
