layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html

   1 <!DOCTYPE HTML>
   2 <title>viewport units rounding reference</title>
   3 <meta charset="UTF-8">
   4 <style>
   5 div.contain { height: 50px }
   6 div.contain > div { height: 10px }
   7 div.contain > div > div { height: 10px; float: left }
   8 </style>
   9
  10 <div class="contain" style="width: 200px">
  11   <div>
  12     <div style="width: 50px; background: fuchsia"></div>
  13     <div style="width: 50px; background: aqua"></div>
  14     <div style="width: 50px; background: silver"></div>
  15     <div style="width: 50px; background: yellow"></div>
  16   </div>
  17   <div>
  18     <div style="width: 48px; background: fuchsia"></div>
  19     <div style="width: 48px; background: aqua"></div>
  20     <div style="width: 48px; background: silver"></div>
  21     <div style="width: 48px; background: yellow"></div>
  22     <div style="width: 8px; background: gray"></div>
  23   </div>
  24   <div>
  25     <div style="width: 42px; background: fuchsia"></div>
  26     <div style="width: 42px; background: aqua"></div>
  27     <div style="width: 42px; background: silver"></div>
  28     <div style="width: 42px; background: yellow"></div>
  29     <div style="width: 32px; background: gray"></div>
  30   </div>
  31 </div>
  32
  33 <div class="contain" style="width: 201px">
  34   <div>
  35     <div style="width: 50px; background: fuchsia"></div>
  36     <div style="width: 51px; background: aqua"></div>
  37     <div style="width: 50px; background: silver"></div>
  38     <div style="width: 50px; background: yellow"></div>
  39   </div>
  40   <div>
  41     <div style="width: 48px; background: fuchsia"></div>
  42     <div style="width: 48px; background: aqua"></div>
  43     <div style="width: 49px; background: silver"></div>
  44     <div style="width: 48px; background: yellow"></div>
  45     <div style="width: 8px; background: gray"></div>
  46   </div>
  47   <div>
  48     <div style="width: 42px; background: fuchsia"></div>
  49     <div style="width: 42px; background: aqua"></div>
  50     <div style="width: 43px; background: silver"></div>
  51     <div style="width: 42px; background: yellow"></div>
  52     <div style="width: 32px; background: gray"></div>
  53   </div>
  54 </div>
  55
  56 <div class="contain" style="width: 202px">
  57   <div>
  58     <div style="width: 51px; background: fuchsia"></div>
  59     <div style="width: 50px; background: aqua"></div>
  60     <div style="width: 51px; background: silver"></div>
  61     <div style="width: 50px; background: yellow"></div>
  62   </div>
  63   <div>
  64     <div style="width: 48px; background: fuchsia"></div>
  65     <div style="width: 49px; background: aqua"></div>
  66     <div style="width: 48px; background: silver"></div>
  67     <div style="width: 49px; background: yellow"></div>
  68     <div style="width: 8px; background: gray"></div>
  69   </div>
  70   <div>
  71     <div style="width: 42px; background: fuchsia"></div>
  72     <div style="width: 43px; background: aqua"></div>
  73     <div style="width: 42px; background: silver"></div>
  74     <div style="width: 43px; background: yellow"></div>
  75     <div style="width: 32px; background: gray"></div>
  76   </div>
  77 </div>
  78
  79 <div class="contain" style="width: 203px">
  80   <div>
  81     <div style="width: 51px; background: fuchsia"></div>
  82     <div style="width: 51px; background: aqua"></div>
  83     <div style="width: 50px; background: silver"></div>
  84     <div style="width: 51px; background: yellow"></div>
  85   </div>
  86   <div>
  87     <div style="width: 49px; background: fuchsia"></div>
  88     <div style="width: 48px; background: aqua"></div>
  89     <div style="width: 49px; background: silver"></div>
  90     <div style="width: 49px; background: yellow"></div>
  91     <div style="width: 8px; background: gray"></div>
  92   </div>
  93   <div>
  94     <div style="width: 43px; background: fuchsia"></div>
  95     <div style="width: 42px; background: aqua"></div>
  96     <div style="width: 43px; background: silver"></div>
  97     <div style="width: 42px; background: yellow"></div>
  98     <div style="width: 33px; background: gray"></div>
  99   </div>
 100 </div>
 101
 102 <div class="contain" style="width: 204px">
 103   <div>
 104     <div style="width: 51px; background: fuchsia"></div>
 105     <div style="width: 51px; background: aqua"></div>
 106     <div style="width: 51px; background: silver"></div>
 107     <div style="width: 51px; background: yellow"></div>
 108   </div>
 109   <div>
 110     <div style="width: 49px; background: fuchsia"></div>
 111     <div style="width: 49px; background: aqua"></div>
 112     <div style="width: 49px; background: silver"></div>
 113     <div style="width: 49px; background: yellow"></div>
 114     <div style="width: 8px; background: gray"></div>
 115   </div>
 116   <div>
 117     <div style="width: 43px; background: fuchsia"></div>
 118     <div style="width: 43px; background: aqua"></div>
 119     <div style="width: 43px; background: silver"></div>
 120     <div style="width: 42px; background: yellow"></div>
 121     <div style="width: 33px; background: gray"></div>
 122   </div>
 123 </div>