| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <html> | 
|  | 3 <head> | 
|  | 4   <style> | 
|  | 5     .set { | 
|  | 6       position: absolute; | 
|  | 7       top: 8px; | 
|  | 8     } | 
|  | 9     .box { | 
|  | 10       height: 100px; | 
|  | 11       width: 100px; | 
|  | 12       background-color: blue; | 
|  | 13     } | 
|  | 14 | 
|  | 15     .hidden { | 
|  | 16       visibility: hidden; | 
|  | 17     } | 
|  | 18 | 
|  | 19     .container.hidden { | 
|  | 20       outline: 4px solid red; | 
|  | 21     } | 
|  | 22 | 
|  | 23     .visible { | 
|  | 24       visibility: visible; | 
|  | 25     } | 
|  | 26     .should-be-hidden { | 
|  | 27       background-color: red !important; | 
|  | 28     } | 
|  | 29     .should-be-visible { | 
|  | 30       background-color: green !important; | 
|  | 31     } | 
|  | 32     .composited { | 
|  | 33       -webkit-transform: translateZ(1px); | 
|  | 34     } | 
|  | 35 | 
|  | 36     .visible-indicator { | 
|  | 37       background-color: green; | 
|  | 38     } | 
|  | 39 | 
|  | 40     .hidden-indicator { | 
|  | 41       background-color: red; | 
|  | 42     } | 
|  | 43   </style> | 
|  | 44   <script> | 
|  | 45     if (window.testRunner) | 
|  | 46       testRunner.waitUntilDone(); | 
|  | 47     requestAnimationFrame(function() { | 
|  | 48       requestAnimationFrame(function() { | 
|  | 49         document.getElementById('target').classList.add('visible'); | 
|  | 50         setTimeout(function() { | 
|  | 51           if (window.testRunner) | 
|  | 52             testRunner.notifyDone(); | 
|  | 53         }); | 
|  | 54       }); | 
|  | 55     }); | 
|  | 56   </script> | 
|  | 57 </head> | 
|  | 58 <body> | 
|  | 59   <!-- Tests that making a child of a composited layer visible causes that child
     to actually paint --> | 
|  | 60   <div class="set"> | 
|  | 61     <div class="hidden-indicator box"></div> | 
|  | 62     <div class="visible-indicator box"></div> | 
|  | 63     <div class="hidden-indicator box"></div> | 
|  | 64   </div> | 
|  | 65 | 
|  | 66   <div class="set"> | 
|  | 67     <div class="hidden container composited"> | 
|  | 68       <div class="visible box should-be-visible"></div> | 
|  | 69     </div> | 
|  | 70 | 
|  | 71     <div class="hidden container composited"> | 
|  | 72       <div class="box should-be-hidden"></div> | 
|  | 73     </div> | 
|  | 74 | 
|  | 75     <div class="hidden container composited"> | 
|  | 76       <div id="target" class="box should-be-visible"></div> | 
|  | 77     </div> | 
|  | 78   </div> | 
|  | 79 </body> | 
|  | 80 </html> | 
| OLD | NEW | 
|---|