third_party/WebKit/LayoutTests/fast/table/overflowHidden.html

   1 <html>
   2 <body>
   3
   4 <table border=2>
   5 <tr valign=middle>
   6 <td width=300 style="overflow:hidden; background-color:grey">
   7 <div style="position:absolute; top:90px; width:600px; background-color:cyan">With absolute positioning on div.</div>
   8 </td>
   9 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
  10 </tr>
  11 </table>
  12
  13 <br><br>
  14
  15 <table border=2>
  16 <tr valign=middle>
  17 <td width=300 style="overflow:hidden; background-color:grey">
  18 <div style="width:600px; background-color:cyan; opacity:0.50;">With opacity on div.</div>
  19 </td>
  20 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
  21 </tr>
  22 </table>
  23
  24 <br><br>
  25
  26 <table border=2>
  27 <tr valign=middle>
  28 <td width=300 style="overflow:hidden; background-color:grey; opacity:0.50;">
  29 <div style="width:600px; background-color:cyan">With opacity on cell.</div>
  30 </td>
  31 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
  32 </tr>
  33 </table>
  34
  35 <br><br>
  36
  37 <table border=2>
  38 <tr valign=middle>
  39 <td width=300 style="overflow:hidden; background-color:grey">
  40 <div style="width:300px; margin-top:-20px; background-color:lime">
  41 <div style="width:600px; background-color:green">Test</div>
  42 </div>
  43 </td>
  44 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
  45 </tr>
  46 </table>
  47
  48 <br><br>
  49
  50 <table border=2>
  51 <tr valign=middle>
  52 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
  53 <td width=300 style="overflow:hidden; background-color:grey">
  54 <div style="width:300px; margin-top:-20px; background-color:lime">
  55 <div style="width:600px; background-color:green">Reverse Test</div>
  56 </div>
  57 </td>
  58 </tr>
  59 </table>
  60
  61 <br><br>
  62
  63 <table border=2>
  64 <tr valign=middle>
  65 <td width=300 style="overflow:hidden; background-color:grey">
  66 <div style="width:300px; margin-top:-20px; background-color:lime">
  67 <div style="width:600px; background-color:green">Stacked Test</div>
  68 </div>
  69 </td>
  70 <td><div style="height:100px; background-color:purple"></div></td>
  71 </tr>
  72 <tr valign=middle>
  73 <td><div style="height:100px; background-color:purple"></div></td>
  74 <td width=300 style="overflow:hidden; background-color:grey">
  75 <div style="width:300px; margin-top:-20px; background-color:lime">
  76 <div style="width:600px; background-color:green">Reverse</div>
  77 </div>
  78 </td>
  79 </tr>
  80 </table>
  81
  82 <br><br>
  83
  84 <table border=2>
  85 <tr valign=middle>
  86 <td width=300 style="overflow:hidden; background-color:grey">
  87 <div style="position:relative; width:600px; background-color:orange">With relative positioning on div.</div>
  88 </td>
  89 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
  90 </tr>
  91 </table>
  92
  93 <br><br>
  94
  95 <table border=2>
  96 <tr valign=middle>
  97 <td width=300 style="overflow:hidden; position:relative; background-color:grey">
  98 <div style="width:600px; background-color:pink">With relative positioning on cell.</div>
  99 </td>
 100 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
 101 </tr>
 102 </table>
 103
 104 <br><br>
 105
 106 <table border=2>
 107 <tr valign=middle>
 108 <td width=300 style="overflow:hidden; position:relative; left:100px; background-color:grey">
 109 <div style="width:600px; background-color:pink">With relative positioning and an offset on cell.</div>
 110 </td>
 111 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
 112 </tr>
 113 </table>
 114
 115 <br><br>
 116
 117 <div style="display:table">
 118 <div style="display:table-row;">
 119 <div style="display:table-cell;vertical-align:middle; overflow:hidden">
 120 <div style="width:300px">
 121 <div style="width:600px; background-color:orange">With display:table-cell</div>
 122 </div>
 123 </div>
 124 <div style="display:table-cell"><div style="height:100px;width:100px; background-color:purple"></div></div>
 125 </div>
 126 </div>
 127
 128 <br><br>
 129
 130 <div style="display:table">
 131 <div style="display:table-row;">
 132 <div style="position:relative; left:100px; display:table-cell;vertical-align:middle; overflow:hidden">
 133 <div style="width:300px">
 134 <div style="width:600px; background-color:orange">With display:table-cell + relative positioning</div>
 135 </div>
 136 </div>
 137 <div style="display:table-cell"><div style="height:100px;width:100px; background-color:purple"></div></div>
 138 </div>
 139 </div>
 140
 141 <br><br>
 142
 143 <table border=5 style="border-collapse:collapse">
 144 <tr valign=middle>
 145 <td width=300 style="overflow:hidden; background-color:grey">
 146 <div style="width:600px; background-color:yellow">Test with border-collapse:collapse</div>
 147 </div>
 148 </td>
 149 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
 150 </tr>
 151 </table>
 152
 153 <br><br>
 154
 155 <table border=5 style="border-collapse:collapse">
 156 <tr valign=middle>
 157 <td width=300 style="overflow:hidden;">
 158 <div style="width:600px; background-color:yellow">Test with border-collapse:collapse no color</div>
 159 </div>
 160 </td>
 161 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
 162 </tr>
 163 </table>
 164
 165 <br><br>
 166
 167 <table border=2>
 168 <tr valign=middle>
 169 <td width=300 style="overflow:auto; background-color:grey">
 170 <div style="width:300px; margin-top:-20px; background-color:lime">
 171 <div style="width:600px; background-color:green">Test with overflow:auto</div>
 172 </div>
 173 </td>
 174 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
 175 </tr>
 176 </table>
 177
 178 <br><br>
 179
 180 <table border=2>
 181 <tr valign=middle>
 182 <td width=300 style="overflow:scroll; background-color:grey">
 183 <div style="width:300px; margin-top:-20px; background-color:lime">
 184 <div style="width:600px; background-color:green">Test with overflow:scroll</div>
 185 </div>
 186 </td>
 187 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
 188 </tr>
 189 </table>
 190
 191 <br><br>
 192
 193 <table>
 194 <tr valign=middle>
 195 <td width=300 style="overflow:auto; background-color:grey; border: 30px solid black">
 196 <div style="width:300px; background-color:lime">
 197 <div style="width:600px; background-color:green">Test with overflow:auto</div>
 198 </div>
 199 </td>
 200 <td><div style="height:100px;width:100px; background-color:purple"></div></td>
 201 </tr>
 202 </table>
 203
 204 </body>
 205 </html>