OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 | |
3 <html lang="en"> | |
4 <head> | |
5 <style type="text/css" media="screen"> | |
6 body { | |
7 height: 2600px; | |
8 } | |
9 | |
10 .container { | |
11 width: 200px; | |
12 height: 200px; | |
13 margin: 10px; | |
14 overflow: auto; | |
15 border: 10px solid black; | |
16 } | |
17 | |
18 .inner { | |
19 width: 100px; | |
20 height: 2200px; | |
21 padding: 5px; | |
22 font-size: 18pt; | |
23 background-color: green; | |
24 } | |
25 | |
26 .compositing { | |
27 position: absolute; | |
28 top: 21px; | |
29 left: 21px; | |
30 width: 100px; | |
31 height: 100px; | |
32 -webkit-transform: translateZ(0); | |
33 } | |
34 | |
35 p { | |
36 font: 1em/1 Ahem, sans-serif; | |
37 } | |
38 | |
39 p.middle { | |
40 position: absolute; | |
41 top: 10%; | |
42 } | |
43 | |
44 p.bottom { | |
45 position: absolute; | |
46 bottom: 0; | |
47 } | |
48 </style> | |
49 <script type="text/javascript" charset="utf-8"> | |
50 if (window.testRunner) { | |
51 testRunner.dumpAsText(); | |
52 testRunner.waitUntilDone(); | |
53 } | |
54 | |
55 function doTest() | |
56 { | |
57 var scrollables = document.querySelectorAll('.container'); | |
58 for (var i = 0; i < scrollables.length; ++i) | |
59 scrollables[i].scrollTop = 100; | |
60 | |
61 if (window.testRunner) { | |
62 document.getElementById('layers').innerText = window.internals.layerTree
AsText(document); | |
63 testRunner.notifyDone(); | |
64 } | |
65 } | |
66 | |
67 window.addEventListener('load', doTest, false); | |
68 </script> | |
69 </head> | |
70 | |
71 <body> | |
72 | |
73 <!-- Go into compositing. --> | |
74 <div class="compositing"></div> | |
75 | |
76 <!-- "middle" text should be visible --> | |
77 <div class="container" style="position: relative; overflow: hidden;"> | |
78 <div class="inner" style="position: relative;"> | |
79 <p class="top">top</p> | |
80 <p class="middle">middle</p> | |
81 <p class="bottom">bottom</p> | |
82 </div> | |
83 </div> | |
84 | |
85 <!-- Vertical scrollbar should be visible --> | |
86 <!-- "middle" text should be visible --> | |
87 <!-- "inner" should use a tiled layer --> | |
88 <div class="container" style="position: relative;"> | |
89 <div class="inner" style="position: relative;"> | |
90 <p class="top">top</p> | |
91 <p class="middle">middle</p> | |
92 <p class="bottom">bottom</p> | |
93 </div> | |
94 </div> | |
95 | |
96 <pre id="layers">Layer tree goes here in DRT</pre> | |
97 | |
98 </body> | |
99 </html> | |
OLD | NEW |