| OLD | NEW | 
 | (Empty) | 
|   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |  | 
|   2    "http://www.w3.org/TR/html4/loose.dtd"> |  | 
|   3  |  | 
|   4 <html lang="en"> |  | 
|   5 <head> |  | 
|   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |  | 
|   7   <title>Composited scrolling creates a stacking context.</title> |  | 
|   8   <style type="text/css" media="screen"> |  | 
|   9     .container { |  | 
|  10       width: 200px; |  | 
|  11       height: 200px; |  | 
|  12       overflow: scroll; |  | 
|  13       margin: 20px; |  | 
|  14       border: 1px solid black; |  | 
|  15     } |  | 
|  16  |  | 
|  17     .composited { |  | 
|  18       width: 200px; |  | 
|  19       height: 150px; |  | 
|  20       -webkit-transform: translateZ(0); |  | 
|  21       background-color: green; |  | 
|  22     } |  | 
|  23  |  | 
|  24     .not-composited { |  | 
|  25       width: 200px; |  | 
|  26       height: 150px; |  | 
|  27       background-color: blue; |  | 
|  28     } |  | 
|  29  |  | 
|  30     .in-flow-positioned { |  | 
|  31       position: relative; |  | 
|  32       display: block; |  | 
|  33     } |  | 
|  34  |  | 
|  35     .fixed { |  | 
|  36       z-index: -1; |  | 
|  37       position: absolute; |  | 
|  38       width: 200px; |  | 
|  39       height: 300px; |  | 
|  40       background-color: red; |  | 
|  41     } |  | 
|  42   </style> |  | 
|  43   <script type="text/javascript" charset="utf-8"> |  | 
|  44     if (window.testRunner) |  | 
|  45       testRunner.dumpAsText(); |  | 
|  46  |  | 
|  47     if (window.internals) |  | 
|  48       window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
    d(true); |  | 
|  49  |  | 
|  50     function doTest() |  | 
|  51     { |  | 
|  52       document.body.offsetTop; |  | 
|  53  |  | 
|  54       if (window.internals) { |  | 
|  55         var layerTree = window.internals.layerTreeAsText(document); |  | 
|  56         var pre = document.getElementById('console'); |  | 
|  57         var text = document.createTextNode(layerTree + '\n'); |  | 
|  58         pre.appendChild(text); |  | 
|  59       } |  | 
|  60     } |  | 
|  61  |  | 
|  62     window.addEventListener('load', doTest, false); |  | 
|  63   </script> |  | 
|  64 </head> |  | 
|  65 <body> |  | 
|  66   <div class="container"> |  | 
|  67     <div class="in-flow-positioned"> |  | 
|  68       <div class="fixed"></div> |  | 
|  69     </div> |  | 
|  70     <div class="composited"></div> |  | 
|  71     <div class="not-composited"></div> |  | 
|  72   </div> |  | 
|  73   <pre id="console"></pre> |  | 
|  74 </body> |  | 
|  75 </html> |  | 
|  76  |  | 
| OLD | NEW |