layout/reftests/border-radius/corner-joins-1.xhtml

   1 <?xml version="1.0"?>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4 <title>border</title>
   5 <style type="text/css">
   6
   7 div.wrapper {
   8   float: left;
   9   margin-left: 20px;
  10   margin-top: 10px;
  11 }
  12
  13 div.test {
  14         width: 144px;
  15         height: 86px;
  16         border-radius: 72px;
  17         border-top: 18px solid;
  18         border-bottom: 18px solid;
  19         background: red;
  20         margin-bottom: 20px;
  21 }
  22
  23 div.cover, div.cover2 {
  24         position: absolute;
  25         border: 4px solid white; /* cover areas that may differ */
  26         width: 140px;
  27         height: 118px;
  28         border-radius: 63px;
  29         margin-left: -2px;
  30         margin-top: -2px;
  31 }
  32 div.cover2 {
  33         height: 82px;
  34         margin-top: 16px;
  35         border-radius: 63px / 45px;
  36 }
  37
  38 #one {
  39         border-color: blue;
  40 }
  41
  42 #two {
  43         border-bottom-color: blue;
  44 }
  45
  46 #three {
  47         border-color: blue;
  48         border-left: 0.01px solid red;
  49         border-right: 0.01px solid red;
  50 }
  51
  52 #four {
  53         border-bottom-color: blue;
  54         border-left: 0.001px solid red;
  55         border-right: 0.001px solid red;
  56 }
  57
  58 </style>
  59 </head>
  60 <body>
  61 <div class="wrapper">
  62 <div class="cover"></div>
  63 <div class="cover2"></div>
  64 <div class="test" id="one"></div>
  65 <div class="cover"></div>
  66 <div class="cover2"></div>
  67 <div class="test" id="two"></div>
  68 </div>
  69 <div class="wrapper">
  70 <div class="cover" style="width: 142px"></div>
  71 <div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div>
  72 <div class="test" id="three"></div>
  73 <div class="cover"></div>
  74 <div class="cover2"></div>
  75 <div class="test" id="four"></div>
  76 </div>
  77 </body>
  78 </html>