layout/reftests/bugs/461512-1.html

   1 <html>
   2   <head>
   3     <style type="text/css">
   4       body { background-color: white; margin: 0; padding: 0; }
   5       p {
   6         margin: 10px;
   7         padding: 0;
   8         border: 10px solid rgba(200, 160, 120, 0.5);
   9         height: 10px;
  10       }
  11
  12       /**
  13        * XXX we cannot test the corner by this testing because when the corner
  14        *     is joined with anti-aliased, the edge isn't matching with the
  15        *     reference.  The dotted line's anti-aliasing is same.
  16        */
  17
  18       /* Cover the coners by the white div element */
  19       div {
  20         position: absolute;
  21         width: 10px;
  22         height: 10px;
  23         background-color: white;
  24       }
  25       div.tr {
  26         right: 10px;
  27       }
  28       div.tl {
  29         left: 10px;
  30       }
  31       div.bl {
  32         left: 10px;
  33         margin-top: 20px;
  34       }
  35       div.br {
  36         right: 10px;
  37         margin-top: 20px;
  38       }
  39     </style>
  40   </head>
  41   <body>
  42     <p style="border-style: solid;">&nbsp;</p>
  43     <p style="border-style: dashed;">&nbsp;</p>
  44     <!-- <p style="border-style: dotted;">&nbsp;</p> -->
  45     <p style="border-style: double;">&nbsp;</p>
  46     <div class="tr"></div>
  47     <div class="bl"></div>
  48     <p style="border-style: ridge;">&nbsp;</p>
  49     <div class="tr"></div>
  50     <div class="bl"></div>
  51     <p style="border-style: groove;">&nbsp;</p>
  52     <div class="tr"></div>
  53     <div class="bl"></div>
  54     <p style="border-style: inset;">&nbsp;</p>
  55     <div class="tr"></div>
  56     <div class="bl"></div>
  57     <p style="border-style: outset;">&nbsp;</p>
  58   </body>
  59 </html>