08297b35459cf59b34cbc0afd551dcdec38a87b9
[WebKit-https.git] / LayoutTests / platform / mac-wk2 / tiled-drawing / scrolling / fixed / four-bars-with-header-and-footer.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <style type="text/css" media="screen">
6       body {
7         height: 2200px;
8       }
9       
10       .fixed {
11         position: fixed;
12         top: 0;
13         left: 0;
14         margin: 10px;
15         height: 50px;
16         background-color: rgba(0, 128, 0, 0.8);
17         border: 2px solid black;
18         -webkit-box-shadow: 0 0 10px black;
19       }
20       
21       .top, .bottom {
22         width: 96%;
23       }
24
25       .left {
26         top: 200px;
27         left: 10px;
28         width: 150px;
29         height: 300px;
30       }
31
32       .right {
33         top: 200px;
34         left: auto;
35         right: 10px;
36         width: 150px;
37         height: 300px;
38       }
39       
40       .bottom {
41         top: auto;
42         bottom: 10px;
43       }
44       
45     </style>
46     <script>
47       if (window.testRunner) {
48         testRunner.waitUntilDone();
49         testRunner.dumpAsText();
50       }
51         if (window.internals) {
52             window.internals.setHeaderHeight(100);
53             window.internals.setFooterHeight(100);
54         }
55
56       function doScroll()
57       {
58         window.setTimeout(function() {
59           window.scrollTo(0, 200);
60           if (window.testRunner) {
61             document.getElementById('results').innerText = window.internals.scrollingStateTreeAsText();
62             testRunner.notifyDone();
63           }
64         }, 10);
65       }
66       
67       window.addEventListener('load', doScroll, false);
68     </script>
69 </head>
70 <body>
71
72 <pre id="results"></pre>
73
74 <div class="fixed top">
75   This is the top bar.
76 </div>
77 <div class="fixed left">
78   This is the left bar.
79 </div>
80 <div class="fixed right">
81   This is the right bar.
82 </div>
83 <div class="fixed bottom">
84   This is the bottom bar.
85 </div>
86
87 </body>
88 </html>