layout/reftests/pixel-rounding/rounded-background-color-left-4.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>Pixel rounding testcase</title>
   5 <style type="text/css">
   6
   7 html, body { margin: 0; border: none; padding: 0; }
   8
   9 body > div { margin: 10px; height: 80px; position: relative; }
  10
  11 body > div > div {
  12     position: absolute; top: 0; left: 0.4px; height: 10px; width: 10px;
  13 }
  14
  15 body > div > div { background: green; }
  16
  17 .tl { top: 20px; }
  18 .tr { margin-top: 40px; }
  19 .bl { left: 20.4px; }
  20 .br { margin-left: 40px; }
  21
  22 div.one > div.tl { border-top-left-radius: 1px; }
  23 div.one > div.tr { border-top-right-radius: 1px; }
  24 div.one > div.bl { border-bottom-left-radius: 1px; }
  25 div.one > div.br { border-bottom-right-radius: 1px; }
  26 div.four > div.tl { border-top-left-radius: 4px; }
  27 div.four > div.tr { border-top-right-radius: 4px; }
  28 div.four > div.bl { border-bottom-left-radius: 4px; }
  29 div.four > div.br { border-bottom-right-radius: 4px; }
  30
  31 </style>
  32 </head>
  33 <body>
  34
  35 <div class="one">
  36 <div></div>
  37 <div class="tl"></div>
  38 <div class="tr"></div>
  39 <div class="bl"></div>
  40 <div class="br"></div>
  41 <div class="tl tr"></div>
  42 <div class="tl bl"></div>
  43 <div class="tl br"></div>
  44 <div class="tr bl"></div>
  45 <div class="tr br"></div>
  46 <div class="bl br"></div>
  47 <div class="tl tr bl"></div>
  48 <div class="tl tr br"></div>
  49 <div class="tl bl br"></div>
  50 <div class="tr bl br"></div>
  51 <div class="tl tr bl br"></div>
  52 </div>
  53
  54 <div class="four">
  55 <div></div>
  56 <div class="tl"></div>
  57 <div class="tr"></div>
  58 <div class="bl"></div>
  59 <div class="br"></div>
  60 <div class="tl tr"></div>
  61 <div class="tl bl"></div>
  62 <div class="tl br"></div>
  63 <div class="tr bl"></div>
  64 <div class="tr br"></div>
  65 <div class="bl br"></div>
  66 <div class="tl tr bl"></div>
  67 <div class="tl tr br"></div>
  68 <div class="tl bl br"></div>
  69 <div class="tr bl br"></div>
  70 <div class="tl tr bl br"></div>
  71 </div>
  72
  73 </body>
  74 </html>