Quellcode-Bibliothek 1443027-3.html   Sprache: HTML

<!DOCTYPE html>
<html lang="en" class="reftest-wait"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<title>Bug 1443027 - Test merging across multiple paints</title>

<style>

body { opacity: 0.9; }

div {
  position: absolute;
}

#A {
  left: 250px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
}

#B {
  left: 200px;
  top: 0px;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

#C {
  left: 0px;
  top: 0px;
  width: 100px;
  height: 100px;
  background-color: green;
}

#D {
  left: 80px;
  top: 20px;
  width: 140px;
  height: 100px;
  background-color: blue;
}

</style>
</head>
<body>
<div id="A"></div>
<div id="B"></div>
<div id="D"></div>
<div id="C"></div>

<script>

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");
var D = document.getElementById("D");

A.style.visibility = "hidden";
B.style.visibility = "hidden";
C.style.visibility = "hidden";
D.style.visibility = "hidden";

window.addEventListener("MozReftestInvalidate", step1);

function step1() {
  A.style.visibility = "visible";
  A.style.transform = "translatez(1px)";

  window.requestAnimationFrame(function() { window.requestAnimationFrame(step2); });
}

function step2() {
  C.style.visibility = "visible";
  C.style.transform = "translatez(1px)";
  D.style.visibility = "visible";
  D.style.transform = "translatez(1px)";

  window.requestAnimationFrame(step3);
}

function step3() {
  B.style.visibility = "visible";
  B.style.transform = "translatez(1px)";
  document.documentElement.removeAttribute('class');
}

</script>
</body></html>