4 <style type="text/css">
11 transform: translateZ(0);
15 border: 40px solid gray;
16 background-color: red;
18 outline: 20px solid transparent; /* Makes compositing layers larger */
26 transform: translateZ(0);
38 display: inline-block;
39 background-color: green;
44 @-webkit-keyframes fade {
45 from { background-color: green; }
46 to { background-color: orange; }
55 background-color: blue;
59 opacity: 0; /* hide from pixel test */
63 <script type="text/javascript" charset="utf-8">
64 if (window.testRunner) {
65 testRunner.dumpAsTextWithPixelResults();
66 testRunner.waitUntilDone();
71 var imagesToRepaint = document.querySelectorAll('.repainted');
72 for (var i = 0; i < imagesToRepaint.length; ++i) {
73 var currImage = imagesToRepaint[i];
74 currImage.style.backgroundColor = 'orange';
77 if (window.testRunner)
78 testRunner.notifyDone();
81 window.addEventListener('load', function() {
82 window.setTimeout(repaint, 0);
88 <!-- Both boxes should look the same. You should see no red. -->
89 <div class="main box">
90 <img><img><img class="repainted"><img>
91 <div class="negative child"></div>
94 <div class="main box" style="overflow: hidden;">
95 <img><img><img class="repainted"><img>
96 <div class="negative child"></div>
99 <pre id="layer-tree"></pre>