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

   1 <?xml version="1.0"?>
   2 <html xmlns="http://www.w3.org/1999/xhtml"
   3       xmlns:svg="http://www.w3.org/2000/svg">
   4 <head>
   5 <title>border</title>
   6 <style type="text/css">
   7 @namespace url("http://www.w3.org/1999/xhtml");
   8 @namespace svg url("http://www.w3.org/2000/svg");
   9
  10 div.wrapper {
  11   float: left;
  12   margin-left: 20px;
  13   margin-top: 10px;
  14 }
  15
  16 div.cover, div.cover2 {
  17         position: absolute;
  18         border: 4px solid white; /* cover areas that may differ */
  19         width: 140px;
  20         height: 118px;
  21         border-radius: 63px;
  22         margin-left: -2px;
  23         margin-top: -2px;
  24 }
  25 div.cover2 {
  26         height: 82px;
  27         margin-top: 16px;
  28         border-radius: 63px / 45px;
  29 }
  30
  31 svg|svg {
  32         display: block;
  33         width: 146px;
  34         height: 122px;
  35         margin-right: -2px;
  36         margin-bottom: 20px;
  37 }
  38
  39 </style>
  40 </head>
  41 <body>
  42 <div class="wrapper">
  43 <div class="cover"></div>
  44 <div class="cover2"></div>
  45 <svg:svg>
  46   <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
  47             fill="blue"/>
  48   <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px"
  49             fill="red"/>
  50 </svg:svg>
  51 <div class="cover"></div>
  52 <div class="cover2"></div>
  53 <svg:svg>
  54   <svg:clipPath id="topclip">
  55     <svg:rect x="0" y="0" width="144px" height="61px"/>
  56   </svg:clipPath>
  57   <svg:clipPath id="botclip">
  58     <svg:rect x="0" y="61px" width="144px" height="61px"/>
  59   </svg:clipPath>
  60   <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
  61             fill="black" clip-path="url(#topclip)"/>
  62   <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
  63             fill="blue" clip-path="url(#botclip)"/>
  64   <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px"
  65             fill="red"/>
  66 </svg:svg>
  67 </div>
  68 <div class="wrapper">
  69 <div class="cover" style="width: 142px"></div>
  70 <div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div>
  71 <svg:svg>
  72   <svg:rect x="0" y="0" width="146px" height="122px" rx="61px" ry="61px"
  73             fill="blue"/>
  74   <svg:rect x="0" y="18px" width="146px" height="86px" rx="61px" ry="43px"
  75             fill="red"/>
  76 </svg:svg>
  77 <div class="cover"></div>
  78 <div class="cover2"></div>
  79 <svg:svg>
  80   <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
  81             fill="black" clip-path="url(#topclip)"/>
  82   <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px"
  83             fill="blue" clip-path="url(#botclip)"/>
  84   <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px"
  85             fill="red"/>
  86 </svg:svg>
  87 </div>
  88 </body>
  89 </html>