|
1 <html><head> |
|
2 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
|
3 <style type="text/css"> |
|
4 .outer { |
|
5 display:table; |
|
6 height:20px; |
|
7 width:300px; |
|
8 max-width:300px; |
|
9 } |
|
10 |
|
11 .inner { |
|
12 background-color: silver; |
|
13 display:table-cell; |
|
14 height:20px; |
|
15 min-height:20px; |
|
16 width:150px; |
|
17 max-width:150px; |
|
18 padding: 4px; |
|
19 } |
|
20 </style> |
|
21 </head> |
|
22 <body> |
|
23 <h2>Testing CSS overflow on display:table-cell</h2> |
|
24 <div class="outer"> |
|
25 <div class="inner" style="overflow-y:hidden;"> |
|
26 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
27 </div> |
|
28 </div> |
|
29 <div class="outer"> |
|
30 <div class="inner" style="overflow-y:scroll;"> |
|
31 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
32 </div> |
|
33 </div> |
|
34 <div class="outer"> |
|
35 <div class="inner" style="overflow-y:-moz-hidden-unscrollable;"> |
|
36 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
37 </div> |
|
38 </div> |
|
39 <div class="outer"> |
|
40 <div class="inner" style="overflow:hidden;"> |
|
41 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
42 </div> |
|
43 </div> |
|
44 <div class="outer"> |
|
45 <div class="inner" style="overflow:scroll;"> |
|
46 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
47 </div> |
|
48 </div> |
|
49 <div class="outer"> |
|
50 <div class="inner" style="overflow:-moz-hidden-unscrollable;"> |
|
51 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
52 </div> |
|
53 </div> |
|
54 <h2>Testing CSS overflow on display:table</h2> |
|
55 <div class="outer" style="overflow-y:hidden;"> |
|
56 <div class="inner"> |
|
57 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
58 </div> |
|
59 </div> |
|
60 <div class="outer" style="overflow-y:scroll;"> |
|
61 <div class="inner"> |
|
62 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
63 </div> |
|
64 </div> |
|
65 <div class="outer" style="overflow-y:-moz-hidden-unscrollable;"> |
|
66 <div class="inner"> |
|
67 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
68 </div> |
|
69 </div> |
|
70 <div class="outer" style="overflow:hidden;"> |
|
71 <div class="inner"> |
|
72 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
73 </div> |
|
74 </div> |
|
75 <div class="outer" style="overflow:scroll;"> |
|
76 <div class="inner"> |
|
77 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
78 </div> |
|
79 </div> |
|
80 <div class="outer" style="overflow:-moz-hidden-unscrollable;"> |
|
81 <div class="inner"> |
|
82 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
83 </div> |
|
84 </div> |
|
85 </body></html> |