layout/reftests/table-background/border-separate-opacity-table-row.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html lang="en-US">
   4 <head>
   5         <title>Table background tests</title>
   6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   7         <meta http-equiv="Content-Style-Type" content="text/css">
   8         <style type="text/css">
   9
  10         html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
  11         body { padding: 15px; }
  12
  13         .o { opacity: 0.5; }
  14
  15         table {
  16                 margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */
  17                 border: transparent solid;
  18                 border-width: 4px 2px 7px 3px;
  19                 padding: 3px 7px 8px 6px;
  20                 border-collapse: separate;
  21                 border-spacing: 2px 3px;
  22         }
  23
  24         td {
  25                 border: transparent solid;
  26                 border-width: 2px 1px 4px 3px;
  27                 padding: 1px 2px 4px 3px;
  28                 empty-cells: show;
  29         }
  30
  31         div { height: 10px; width: 50px; }
  32
  33         table.color tr.t { background-color: aqua; }
  34
  35         table.imagetl tr.t, table.imagebr tr.t {
  36                 background-image: url(repeatable-diagonal-gradient-with-ticks.png);
  37         }
  38
  39         table.imagetl tr.t { background-position: top left; /* default */ }
  40         table.imagebr tr.t { background-position: bottom right; /* default */ }
  41
  42         </style>
  43 </head>
  44 <body>
  45
  46 <table class="color">
  47         <colgroup><col></colgroup>
  48         <colgroup class="t o">
  49         <col>
  50         <col class="t o">
  51         <col>
  52         </colgroup>
  53         <colgroup><col></colgroup>
  54         <tbody>
  55         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  56         </tbody>
  57         <tbody class="t">
  58         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  59         <tr class="t"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr>
  60         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  61         </tbody>
  62         <tbody>
  63         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  64         </tbody>
  65 </table>
  66
  67 <table class="imagetl">
  68         <colgroup><col></colgroup>
  69         <colgroup class="t">
  70         <col>
  71         <col class="t">
  72         <col>
  73         </colgroup>
  74         <colgroup><col></colgroup>
  75         <tbody>
  76         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  77         </tbody>
  78         <tbody class="t">
  79         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  80         <tr class="t o"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
  81         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  82         </tbody>
  83         <tbody>
  84         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  85         </tbody>
  86 </table>
  87
  88 <table class="imagebr">
  89         <colgroup><col></colgroup>
  90         <colgroup class="t">
  91         <col>
  92         <col class="t">
  93         <col>
  94         </colgroup>
  95         <colgroup><col></colgroup>
  96         <tbody>
  97         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  98         </tbody>
  99         <tbody class="t o">
 100         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 101         <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
 102         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 103         </tbody>
 104         <tbody>
 105         <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
 106         </tbody>
 107 </table>
 108
 109 </body>
 110 </html>