|
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 .clip { |
|
21 overflow:hidden; |
|
22 width:-moz-fit-content; |
|
23 } |
|
24 </style> |
|
25 </head> |
|
26 <body> |
|
27 <h2>Testing CSS overflow on display:table-cell</h2> |
|
28 <div class="outer"> |
|
29 <div class="inner"> |
|
30 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
31 </div> |
|
32 </div> |
|
33 <div class="outer"> |
|
34 <div class="inner"> |
|
35 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
36 </div> |
|
37 </div> |
|
38 <div class="outer"> |
|
39 <div class="inner"> |
|
40 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
41 </div> |
|
42 </div> |
|
43 <div class="clip"><div class="outer"> |
|
44 <div class="inner"> |
|
45 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
46 </div> |
|
47 </div></div> |
|
48 <div class="outer"> |
|
49 <div class="inner"> |
|
50 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
51 </div> |
|
52 </div> |
|
53 <div class="clip"><div class="outer"> |
|
54 <div class="inner"> |
|
55 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
56 </div> |
|
57 </div></div> |
|
58 <h2>Testing CSS overflow on display:table</h2> |
|
59 <div class="outer"> |
|
60 <div class="inner"> |
|
61 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
62 </div> |
|
63 </div> |
|
64 <div class="outer"> |
|
65 <div class="inner"> |
|
66 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
67 </div> |
|
68 </div> |
|
69 <div class="outer"> |
|
70 <div class="inner"> |
|
71 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
72 </div> |
|
73 </div> |
|
74 <div class="clip"><div class="outer"> |
|
75 <div class="inner"> |
|
76 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
77 </div> |
|
78 </div></div> |
|
79 <div class="outer"> |
|
80 <div class="inner"> |
|
81 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
82 </div> |
|
83 </div> |
|
84 <div class="clip"><div class="outer"> |
|
85 <div class="inner"> |
|
86 <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs="> |
|
87 </div> |
|
88 </div></div> |
|
89 </body></html> |