bug785684-ref.html 2.8 KB

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