layout/reftests/pixel-rounding/background-image-left-width-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 div { position: absolute; height: 10px; width: 10.9px; }
   9
  10 div.i1  { top: 10px; background-image: url(blue-1x1.png); }
  11 div.i3  { top: 30px; background-image: url(blue-3x3.png); }
  12 div.i5  { top: 50px; background-image: url(blue-5x5.png); }
  13 div.i25 { top: 70px; background-image: url(blue-25x25.png); }
  14
  15 div.p1 { left: 9.5px; background-position: top left; }
  16 div.p2 { left: 29.5px; background-position: top; }
  17 div.p3 { left: 49.5px; background-position: top right; }
  18 div.p4 { left: 69.5px; background-position: left; }
  19 div.p5 { left: 89.5px; background-position: center; }
  20 div.p6 { left: 109.5px; background-position: right; }
  21 div.p7 { left: 129.5px; background-position: bottom left; }
  22 div.p8 { left: 149.5px; background-position: bottom; }
  23 div.p9 { left: 169.5px; background-position: bottom right; }
  24
  25 </style>
  26 </head>
  27 <body>
  28
  29 <div class="i1 p1"></div>
  30 <div class="i1 p2"></div>
  31 <div class="i1 p3"></div>
  32 <div class="i1 p4"></div>
  33 <div class="i1 p5"></div>
  34 <div class="i1 p6"></div>
  35 <div class="i1 p7"></div>
  36 <div class="i1 p8"></div>
  37 <div class="i1 p9"></div>
  38
  39 <div class="i3 p1"></div>
  40 <div class="i3 p2"></div>
  41 <div class="i3 p3"></div>
  42 <div class="i3 p4"></div>
  43 <div class="i3 p5"></div>
  44 <div class="i3 p6"></div>
  45 <div class="i3 p7"></div>
  46 <div class="i3 p8"></div>
  47 <div class="i3 p9"></div>
  48
  49 <div class="i5 p1"></div>
  50 <div class="i5 p2"></div>
  51 <div class="i5 p3"></div>
  52 <div class="i5 p4"></div>
  53 <div class="i5 p5"></div>
  54 <div class="i5 p6"></div>
  55 <div class="i5 p7"></div>
  56 <div class="i5 p8"></div>
  57 <div class="i5 p9"></div>
  58
  59 <div class="i25 p1"></div>
  60 <div class="i25 p2"></div>
  61 <div class="i25 p3"></div>
  62 <div class="i25 p4"></div>
  63 <div class="i25 p5"></div>
  64 <div class="i25 p6"></div>
  65 <div class="i25 p7"></div>
  66 <div class="i25 p8"></div>
  67 <div class="i25 p9"></div>
  68
  69 </body>
  70 </html>