src/third_party/WebKit/LayoutTests/fast/css/percentage-non-integer.html

   1 <head>
   2     <title>Test for http://bugs.webkit.org/show_bug.cgi?id=5164</title>
   3     <style type="text/css">
   4         body { overflow: hidden; }
   5         div.bar { height: 4px; background-color: rgba(0, 0, 0, 0.5); }
   6         td.green { background-color: green; }
   7         td.black { background-color: black; }
   8         td.red { background-color: #0f0; }
   9         td.greenOverlay { background-color: rgba(0, 255, 0, 0.5); }
  10         td.blackOverlay { background-color: rgba(0, 0, 0, 0.5); }
  11         td.sep { width: 10px; }
  12     </style>
  13 </head>
  14 <body>
  15     <div style="background-color: #0f0; width: 100px; height: 100px;">
  16         <div><div class="bar" style="width: 100px"></div></div>
  17         <div style="width: 1005px"><div class="bar" style="width: 10%"></div></div>
  18         <div style="width: 995px"><div class="bar" style="width: 10.1%"></div></div>
  19         <div style="width: 985px"><div class="bar" style="width: 10.2%"></div></div>
  20         <div style="width: 975px"><div class="bar" style="width: 10.3%"></div></div>
  21         <div style="width: 965px"><div class="bar" style="width: 10.4%"></div></div>
  22         <div style="width: 955px"><div class="bar" style="width: 10.5%"></div></div>
  23         <div style="width: 945px"><div class="bar" style="width: 10.6%"></div></div>
  24         <div style="width: 935px"><div class="bar" style="width: 10.7%"></div></div>
  25         <div style="width: 930px"><div class="bar" style="width: 10.8%"></div></div>
  26         <div style="width: 920px"><div class="bar" style="width: 10.9%"></div></div>
  27         <div style="width: 910px"><div class="bar" style="width: 11%"></div></div>
  28         <div style="width: 910px"><div class="bar" style="width: 11.1%"></div></div>
  29         <div style="width: 900px"><div class="bar" style="width: 11.2%"></div></div>
  30         <div style="width: 890px"><div class="bar" style="width: 11.3%"></div></div>
  31         <div style="width: 885px"><div class="bar" style="width: 11.4%"></div></div>
  32         <div style="width: 875px"><div class="bar" style="width: 11.5%"></div></div>
  33         <div style="width: 870px"><div class="bar" style="width: 11.6%"></div></div>
  34         <div style="width: 860px"><div class="bar" style="width: 11.7%"></div></div>
  35         <div style="width: 850px"><div class="bar" style="width: 11.8%"></div></div>
  36         <div style="width: 845px"><div class="bar" style="width: 11.9%"></div></div>
  37         <div style="width: 840px"><div class="bar" style="width: 12%"></div></div>
  38         <div style="width: 835px"><div class="bar" style="width: 12.1%"></div></div>
  39         <div style="width: 825px"><div class="bar" style="width: 12.2%"></div></div>
  40         <div style="width: 815px"><div class="bar" style="width: 12.3%"></div></div>
  41     </div>
  42     <br>
  43     <div style="position: relative;">
  44         <table style="position: absolute; top: 0; left: 0; " cellpadding="0" cellspacing="0">
  45             <tr style="height: 20px;">
  46                 <td class="red" style="width: 11px;"></td>
  47                 <td class="black sep"></td>
  48                 <td class="red" style="width: 13px;"></td>
  49                 <td class="black sep"></td>
  50                 <td class="red" style="width: 15px;"></td>
  51                 <td class="black sep"></td>
  52                 <td class="red" style="width: 17px;"></td>
  53                 <td class="black sep"></td>
  54                 <td class="red" style="width: 20px;"></td>
  55                 <td class="black sep"></td>
  56                 <td class="red" style="width: 21px;"></td>
  57                 <td class="black sep"></td>
  58                 <td class="red" style="width: 23px;"></td>
  59                 <td class="black sep"></td>
  60                 <td class="red" style="width: 25px;"></td>
  61                 <td class="black sep"></td>
  62                 <td class="red" style="width: 27px;"></td>
  63                 <td class="black sep"></td>
  64                 <td class="red" style="width: 30px;"></td>
  65                 <td></td>
  66             </tr>
  67         </table>
  68         <table style="position: absolute; top: 0; left: 0; width: 1000px;" cellpadding="0" cellspacing="0">
  69             <tr style="height: 20px;">
  70                 <td class="blackOverlay" style="width: 1.2%;">&nbsp;</td>
  71                 <td class="greenOverlay sep">&nbsp;</td>
  72                 <td class="blackOverlay" style="width: 1.4%;">&nbsp;</td>
  73                 <td class="greenOverlay sep">&nbsp;</td>
  74                 <td class="blackOverlay" style="width: 1.6%;">&nbsp;</td>
  75                 <td class="greenOverlay sep">&nbsp;</td>
  76                 <td class="blackOverlay" style="width: 1.8%;">&nbsp;</td>
  77                 <td class="greenOverlay sep">&nbsp;</td>
  78                 <td class="blackOverlay" style="width: 2%;">&nbsp;</td>
  79                 <td class="greenOverlay sep">&nbsp;</td>
  80                 <td class="blackOverlay" style="width: 2.2%;">&nbsp;</td>
  81                 <td class="greenOverlay sep">&nbsp;</td>
  82                 <td class="blackOverlay" style="width: 2.4%;">&nbsp;</td>
  83                 <td class="greenOverlay sep"></td>
  84                 <td class="blackOverlay" style="width: 2.6%;">&nbsp;</td>
  85                 <td class="greenOverlay sep">&nbsp;</td>
  86                 <td class="blackOverlay" style="width: 2.8%;">&nbsp;</td>
  87                 <td class="greenOverlay sep">&nbsp;</td>
  88                 <td class="blackOverlay" style="width: 3%;">&nbsp;</td>
  89                 <td>&nbsp;</td>
  90             </tr>
  91         </table>
  92     </div>
  93 </body>
  94 </html>