layout/reftests/table-background/border-collapse-opacity-table-column-ref.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         /*
  14         table {
  15                 margin: 0px 3px 2px 4px;
  16                 border-width: 4px 2px 8px 6px;
  17
  18                 height is 97px:
  19                   (2px of border outside height)
  20                   extra border width for top row: 0
  21                   cell * 5: == 19px * 5 == 95px
  22                     border-top: 2px;
  23                     padding-top: 1px;
  24                     height: 10px;
  25                     padding-bottom: 4px;
  26                     border-bottom: 2px;
  27                   extra border width for top row: 2px
  28                   (4px of border outside height)
  29
  30                 width is 287px:
  31                   (3px of border outside width)
  32                   extra border width for left column: 2px
  33                   cell * 5: == 57px * 5 == 285px
  34                     border-left: 1px;
  35                     padding-left: 3px;
  36                     width: 50px;
  37                     padding-right: 2px;
  38                     border-right: 1px;
  39                   (1px of border outside width)
  40     */
  41
  42         div { width: 57px; height: 97px; margin: 2px 121px 8px 123px; }
  43         div.color { background-color: aqua; }
  44
  45         div.imagetl, div.imagebr {
  46                 background-image: url(repeatable-diagonal-gradient-with-ticks.png);
  47         }
  48
  49         div.imagetl { background-position: 0 0; }
  50         div.imagebr { background-position: 57px 97px; }
  51
  52         </style>
  53 </head>
  54 <body>
  55
  56 <div class="color"></div>
  57 <div class="imagetl"></div>
  58 <div class="imagebr"></div>
  59
  60 </body>
  61 </html>