| OLD | NEW | 
|   1 <!DOCTYPE html> |   1 <!DOCTYPE html> | 
|   2 <html> |   2 <html> | 
|   3 <head> |   3 <head> | 
|   4 <style> |   4 <style> | 
|   5     .container { |   5     .container { | 
|   6         height: 200px; |   6         height: 200px; | 
|   7         width: 300px; |   7         width: 300px; | 
|   8         border: 4px solid black; |   8         border: 4px solid black; | 
|   9         overflow-y: scroll; |   9         overflow-y: scroll; | 
|  10         resize: both; |  10         resize: both; | 
 |  11         background-color: rgba(0,255,0,0.5); | 
|  11     } |  12     } | 
|  12  |  13  | 
|  13     .box { |  14     .box { | 
|  14         position: relative; |  15         position: relative; | 
|  15         z-index: 1; |  16         z-index: 1; | 
|  16         height: 100px; |  17         height: 100px; | 
|  17         width: 100px; |  18         width: 100px; | 
|  18         margin: 10px; |  19         margin: 10px; | 
|  19         background-color: blue; |  20         background-color: rgba(0,0,255,0.5); | 
|  20     } |  21     } | 
|  21  |  22  | 
|  22  |  23  | 
|  23     #fixed { |  24     #fixed { | 
|  24         position: fixed; |  25         position: fixed; | 
|  25         z-index: 0; |  26         z-index: 0; | 
|  26         background-color: green; |  27         background-color: green; | 
|  27         left: 50px; |  28         left: 50px; | 
|  28         top: 200px; |  29         top: 200px; | 
|  29         height: 200px; |  30         height: 200px; | 
|  30         width: 200px; |  31         width: 200px; | 
|  31     } |  32     } | 
|  32  |  33  | 
|  33     .red { |  34     .red { | 
|  34         background-color: red; |  35         background-color: rgba(255,0,0,0.5); | 
|  35     } |  36     } | 
|  36  |  37  | 
|  37     .clip { |  38     .clip { | 
|  38         width: 80px; |  39         width: 80px; | 
|  39         height: 80px; |  40         height: 80px; | 
|  40         overflow: hidden; |  41         overflow: hidden; | 
|  41     } |  42     } | 
|  42  |  43  | 
|  43 </style> |  44 </style> | 
|  44 <script> |  45 <script> | 
|  45     if (window.testRunner) |  46     if (window.testRunner) | 
|  46         testRunner.dumpAsText(); |  47         testRunner.dumpAsText(); | 
|  47  |  48  | 
|  48     if (window.internals) { |  49     if (window.internals) { | 
|  49         window.internals.settings.setPreferCompositingToLCDTextEnabled(true); |  50         window.internals.settings.setPreferCompositingToLCDTextEnabled(true); | 
|  50     } |  51     } | 
|  51  |  52  | 
|  52     function runTest() { |  53     function runTest() { | 
|  53         var pre = document.createElement('pre'); |  54         var pre = document.createElement('pre'); | 
|  54         if (!window.internals) { |  55         if (!window.internals) { | 
|  55             var description = "This test ensures that amongst the graphics " |  56             var description = "This test ensures that amongst the graphics " | 
|  56                 + "layers corresponding to a single Layer, only one may " |  57                 + "layers corresponding to a single Layer, only one may " | 
|  57                 + "have a scroll parent.";  |  58                 + "have a scroll parent."; | 
|  58             pre.innerHTML = description; |  59             pre.innerHTML = description; | 
|  59         } else { |  60         } else { | 
|  60             document.body.offsetTop; |  61             document.body.offsetTop; | 
|  61             var clip = document.getElementById('clip'); |  62             var clip = document.getElementById('clip'); | 
|  62             clip.className = "clip"; |  63             clip.className = "clip"; | 
|  63             document.body.offsetTop; |  64             document.body.offsetTop; | 
|  64             pre.innerHTML = internals.layerTreeAsText(document, |  65             pre.innerHTML = internals.layerTreeAsText(document, | 
|  65                 internals.LAYER_TREE_INCLUDES_CLIP_AND_SCROLL_PARENTS); |  66                 internals.LAYER_TREE_INCLUDES_CLIP_AND_SCROLL_PARENTS); | 
|  66         } |  67         } | 
|  67         document.body.appendChild(pre); |  68         document.body.appendChild(pre); | 
|  68     } |  69     } | 
|  69     window.onload = runTest; |  70     window.onload = runTest; | 
|  70 </script> |  71 </script> | 
|  71 </head> |  72 </head> | 
|  72 <body> |  73 <body> | 
|  73     <div class="container"> |  74     <div class="container"> | 
|  74         <div id="fixed"></div> |  75         <div id="fixed"></div> | 
|  75         <div id='clip'> |  76         <div id='clip'> | 
|  76             <div class="box red"></div> |  77             <div class="box red"></div> | 
|  77         </div> |  78         </div> | 
|  78         <div class="box"></div> |  79         <div class="box"></div> | 
|  79         <div class="box"></div> |  80         <div class="box"></div> | 
|  80         <div class="box"></div> |  81         <div class="box"></div> | 
|  81         <div class="box"></div> |  82         <div class="box"></div> | 
|  82     </div> |  83     </div> | 
|  83 </body> |  84 </body> | 
|  84 </html> |  85 </html> | 
| OLD | NEW |