Wed, 31 Dec 2014 13:27:57 +0100
Ignore runtime configuration files generated during quality assurance.
1 <!DOCTYPE html>
2 <html class="reftest-wait">
3 <head>
4 <title>The Grid in an overflowing div</title>
5 <style type="text/css">
6 html {
7 padding: 0;
8 border: 0;
9 margin: 0;
10 }
11 body {
12 padding: 0;
13 border: 0;
14 margin: 0;
15 }
16 table {
17 padding: 0;
18 margin: 0;
19 border-top: none;
20 border-left: none;
21 border-right: 1px solid black;
22 border-bottom: 1px solid black;
23 }
24 tr {
25 padding: 0;
26 border: 0;
27 margin: 0;
28 }
29 td {
30 /* top border counts as part of height, but
31 left border doesn't count as part of width.
32 go figure.
33 */
34 min-height: 99px;
35 height: 99px;
36 max-height: 99px;
37 min-width: 99px;
38 width: 99px;
39 max-width: 99px;
40 padding: 0;
41 border-left: 1px solid black;
42 border-top: 1px solid black;
43 border-right: none;
44 border-bottom: none;
45 margin: 0;
46 font-size: 12px;
47 text-align: left;
48 vertical-align: top;
49 font-family: monospace;
50 }
51 </style>
52 <script type="text/javascript">
53 var val = 100;
54 var max = 1000;
55 function scrollmore() {
56 if (val == max) {
57 document.documentElement.removeAttribute('class');
58 return;
59 }
60 var div = document.getElementById('nest');
61 div.scrollLeft = val;
62 div.scrollTop = val;
63 val += 100;
64 document.documentElement.offsetLeft;
65 setTimeout(scrollmore, 500);
66 }
68 window.onload = scrollmore;
69 </script>
70 </head>
71 <body>
72 <div style="color: red">this text is above the scrolling div. the div below is 300x400</div>
73 <div id="nest" style="overflow: scroll; height: 400px; width: 300px; border: solid 1px black">
74 <div style="background: blue; width: 5000px; height: 5000px;">text</div>
75 </div>
76 <div style="color: red">this text is below the scrolling div</div>
77 </body>
78 </html>