layout/reftests/table-overflow/bug785684-x-ref.html

   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  .inner.clipped {
  21      padding: 0;
  22  }
  23  .inner.clipped > .clip {
  24      padding: 4px;
  25  }
  26  .clip {
  27     overflow:hidden;
  28     width: 300px;
  29     box-sizing: border-box;
  30  }
  31   </style>
  32 </head>
  33 <body>
  34 <h2>Testing CSS overflow on display:table-cell</h2>
  35 <div class="outer">
  36   <div class="inner clipped">
  37     <div class="clip">
  38       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  39     </div>
  40   </div>
  41 </div>
  42 <div class="outer">
  43   <div class="inner clipped">
  44     <div class="clip" style="overflow-x: scroll">
  45       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  46     </div>
  47   </div>
  48 </div>
  49 <div class="outer">
  50   <div class="inner clipped">
  51     <div class="clip" style="overflow-x: clip">
  52       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  53     </div>
  54   </div>
  55 </div>
  56 <div class="outer">
  57   <div class="inner clipped">
  58     <div class="clip" style="overflow: hidden">
  59       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  60     </div>
  61   </div>
  62 </div>
  63 <div class="outer">
  64   <div class="inner clipped">
  65     <div class="clip" style="overflow: scroll">
  66       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  67     </div>
  68   </div>
  69 </div>
  70 <div class="outer">
  71   <div class="inner clipped">
  72     <div class="clip" style="overflow: clip">
  73       <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  74     </div>
  75   </div>
  76 </div>
  77 <h2>Testing CSS overflow on display:table</h2>
  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="outer">
  84     <div class="inner">
  85        <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  86     </div>
  87 </div>
  88 <div class="clip"><div class="outer">
  89     <div class="inner">
  90        <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  91     </div>
  92 </div></div>
  93 <div class="clip"><div class="outer">
  94     <div class="inner">
  95        <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
  96     </div>
  97 </div></div>
  98 <div class="outer">
  99     <div class="inner">
 100        <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
 101     </div>
 102 </div>
 103 <div class="clip"><div class="outer">
 104     <div class="inner">
 105        <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
 106     </div>
 107 </div></div>
 108 </body></html>