1443027-3.html (1673B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> 4 <title>Bug 1443027 - Test merging across multiple paints</title> 5 6 <style> 7 8 body { opacity: 0.9; } 9 10 div { 11 position: absolute; 12 } 13 14 #A { 15 left: 250px; 16 top: 50px; 17 width: 100px; 18 height: 100px; 19 background-color: red; 20 } 21 22 #B { 23 left: 200px; 24 top: 0px; 25 width: 100px; 26 height: 100px; 27 background-color: yellow; 28 } 29 30 #C { 31 left: 0px; 32 top: 0px; 33 width: 100px; 34 height: 100px; 35 background-color: green; 36 } 37 38 #D { 39 left: 80px; 40 top: 20px; 41 width: 140px; 42 height: 100px; 43 background-color: blue; 44 } 45 46 </style> 47 </head> 48 <body> 49 <div id="A"></div> 50 <div id="B"></div> 51 <div id="D"></div> 52 <div id="C"></div> 53 54 <script> 55 56 var A = document.getElementById("A"); 57 var B = document.getElementById("B"); 58 var C = document.getElementById("C"); 59 var D = document.getElementById("D"); 60 61 A.style.visibility = "hidden"; 62 B.style.visibility = "hidden"; 63 C.style.visibility = "hidden"; 64 D.style.visibility = "hidden"; 65 66 window.addEventListener("MozReftestInvalidate", step1); 67 68 function step1() { 69 A.style.visibility = "visible"; 70 A.style.transform = "translatez(1px)"; 71 72 window.requestAnimationFrame(function() { window.requestAnimationFrame(step2); }); 73 } 74 75 function step2() { 76 C.style.visibility = "visible"; 77 C.style.transform = "translatez(1px)"; 78 D.style.visibility = "visible"; 79 D.style.transform = "translatez(1px)"; 80 81 window.requestAnimationFrame(step3); 82 } 83 84 function step3() { 85 B.style.visibility = "visible"; 86 B.style.transform = "translatez(1px)"; 87 document.documentElement.removeAttribute('class'); 88 } 89 90 </script> 91 </body></html>