layout/reftests/forms/meter/default-style/default-style-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3   <link rel='stylesheet' type='text/css' href='style.css'>
   4   <style>
   5     /* optimum = 0.0 */
   6     div:nth-child(1) > .meter-optimum { width: 0%; }
   7     div:nth-child(2) > .meter-optimum { width: 10%; }
   8     div:nth-child(3) > .meter-sub-optimum { width: 30%; }
   9     div:nth-child(4) > .meter-sub-optimum { width: 50%; }
  10     div:nth-child(5) > .meter-sub-optimum { width: 70%; }
  11     div:nth-child(6) > .meter-sub-sub-optimum { width: 80%; }
  12     div:nth-child(7) > .meter-sub-sub-optimum { width: 100%; }
  13
  14     /* optimum = 0.1 */
  15     div:nth-child(8) > .meter-optimum { width: 0%; }
  16     div:nth-child(9) > .meter-optimum { width: 10%; }
  17     div:nth-child(10) > .meter-sub-optimum { width: 30%; }
  18     div:nth-child(11) > .meter-sub-optimum { width: 50%; }
  19     div:nth-child(12) > .meter-sub-optimum { width: 70%; }
  20     div:nth-child(13) > .meter-sub-sub-optimum { width: 80%; }
  21     div:nth-child(14) > .meter-sub-sub-optimum { width: 100%; }
  22
  23     /* optimum = 0.3 */
  24     div:nth-child(15) > .meter-sub-optimum { width: 0%; }
  25     div:nth-child(16) > .meter-sub-optimum { width: 10%; }
  26     div:nth-child(17) > .meter-optimum { width: 30%; }
  27     div:nth-child(18) > .meter-optimum { width: 50%; }
  28     div:nth-child(19) > .meter-optimum { width: 70%; }
  29     div:nth-child(20) > .meter-sub-optimum { width: 80%; }
  30     div:nth-child(21) > .meter-sub-optimum { width: 100%; }
  31
  32     /* optimum = 0.5 */
  33     div:nth-child(22) > .meter-sub-optimum { width: 0%; }
  34     div:nth-child(23) > .meter-sub-optimum { width: 10%; }
  35     div:nth-child(24) > .meter-optimum { width: 30%; }
  36     div:nth-child(25) > .meter-optimum { width: 50%; }
  37     div:nth-child(26) > .meter-optimum { width: 70%; }
  38     div:nth-child(27) > .meter-sub-optimum { width: 80%; }
  39     div:nth-child(28) > .meter-sub-optimum { width: 100%; }
  40
  41     /* optimum = 0.7 */
  42     div:nth-child(29) > .meter-sub-optimum { width: 0%; }
  43     div:nth-child(30) > .meter-sub-optimum { width: 10%; }
  44     div:nth-child(31) > .meter-optimum { width: 30%; }
  45     div:nth-child(32) > .meter-optimum { width: 50%; }
  46     div:nth-child(33) > .meter-optimum { width: 70%; }
  47     div:nth-child(34) > .meter-sub-optimum { width: 80%; }
  48     div:nth-child(35) > .meter-sub-optimum { width: 100%; }
  49
  50     /* optimum = 0.8 */
  51     div:nth-child(36) > .meter-sub-sub-optimum { width: 0%; }
  52     div:nth-child(37) > .meter-sub-sub-optimum { width: 10%; }
  53     div:nth-child(38) > .meter-sub-optimum { width: 30%; }
  54     div:nth-child(39) > .meter-sub-optimum { width: 50%; }
  55     div:nth-child(40) > .meter-sub-optimum { width: 70%; }
  56     div:nth-child(41) > .meter-optimum { width: 80%; }
  57     div:nth-child(42) > .meter-optimum { width: 100%; }
  58
  59     /* optimum = 1.0 */
  60     div:nth-child(43) > .meter-sub-sub-optimum { width: 0%; }
  61     div:nth-child(44) > .meter-sub-sub-optimum { width: 10%; }
  62     div:nth-child(45) > .meter-sub-optimum { width: 30%; }
  63     div:nth-child(46) > .meter-sub-optimum { width: 50%; }
  64     div:nth-child(47) > .meter-sub-optimum { width: 70%; }
  65     div:nth-child(48) > .meter-optimum { width: 80%; }
  66     div:nth-child(49) > .meter-optimum { width: 100%; }
  67   </style>
  68   <body>
  69     <!-- optimum = 0.0 -->
  70     <div class="meter-element">
  71       <div class="meter-optimum">
  72       </div>
  73     </div>
  74     <div class="meter-element">
  75       <div class="meter-optimum">
  76       </div>
  77     </div>
  78     <div class="meter-element">
  79       <div class="meter-sub-optimum">
  80       </div>
  81     </div>
  82     <div class="meter-element">
  83       <div class="meter-sub-optimum">
  84       </div>
  85     </div>
  86     <div class="meter-element">
  87       <div class="meter-sub-optimum">
  88       </div>
  89     </div>
  90     <div class="meter-element">
  91       <div class="meter-sub-sub-optimum">
  92       </div>
  93     </div>
  94     <div class="meter-element">
  95       <div class="meter-sub-sub-optimum">
  96       </div>
  97     </div>
  98
  99     <!-- optimum = 0.1 -->
 100     <div class="meter-element">
 101       <div class="meter-optimum">
 102       </div>
 103     </div>
 104     <div class="meter-element">
 105       <div class="meter-optimum">
 106       </div>
 107     </div>
 108     <div class="meter-element">
 109       <div class="meter-sub-optimum">
 110       </div>
 111     </div>
 112     <div class="meter-element">
 113       <div class="meter-sub-optimum">
 114       </div>
 115     </div>
 116     <div class="meter-element">
 117       <div class="meter-sub-optimum">
 118       </div>
 119     </div>
 120     <div class="meter-element">
 121       <div class="meter-sub-sub-optimum">
 122       </div>
 123     </div>
 124     <div class="meter-element">
 125       <div class="meter-sub-sub-optimum">
 126       </div>
 127     </div>
 128
 129     <!-- optimum = 0.3 -->
 130     <div class="meter-element">
 131       <div class="meter-sub-optimum">
 132       </div>
 133     </div>
 134     <div class="meter-element">
 135       <div class="meter-sub-optimum">
 136       </div>
 137     </div>
 138     <div class="meter-element">
 139       <div class="meter-optimum">
 140       </div>
 141     </div>
 142     <div class="meter-element">
 143       <div class="meter-optimum">
 144       </div>
 145     </div>
 146     <div class="meter-element">
 147       <div class="meter-optimum">
 148       </div>
 149     </div>
 150     <div class="meter-element">
 151       <div class="meter-sub-optimum">
 152       </div>
 153     </div>
 154     <div class="meter-element">
 155       <div class="meter-sub-optimum">
 156       </div>
 157     </div>
 158
 159     <!-- optimum = 0.5 -->
 160     <div class="meter-element">
 161       <div class="meter-sub-optimum">
 162       </div>
 163     </div>
 164     <div class="meter-element">
 165       <div class="meter-sub-optimum">
 166       </div>
 167     </div>
 168     <div class="meter-element">
 169       <div class="meter-optimum">
 170       </div>
 171     </div>
 172     <div class="meter-element">
 173       <div class="meter-optimum">
 174       </div>
 175     </div>
 176     <div class="meter-element">
 177       <div class="meter-optimum">
 178       </div>
 179     </div>
 180     <div class="meter-element">
 181       <div class="meter-sub-optimum">
 182       </div>
 183     </div>
 184     <div class="meter-element">
 185       <div class="meter-sub-optimum">
 186       </div>
 187     </div>
 188
 189     <!-- optimum = 0.7 -->
 190     <div class="meter-element">
 191       <div class="meter-sub-optimum">
 192       </div>
 193     </div>
 194     <div class="meter-element">
 195       <div class="meter-sub-optimum">
 196       </div>
 197     </div>
 198     <div class="meter-element">
 199       <div class="meter-optimum">
 200       </div>
 201     </div>
 202     <div class="meter-element">
 203       <div class="meter-optimum">
 204       </div>
 205     </div>
 206     <div class="meter-element">
 207       <div class="meter-optimum">
 208       </div>
 209     </div>
 210     <div class="meter-element">
 211       <div class="meter-sub-optimum">
 212       </div>
 213     </div>
 214     <div class="meter-element">
 215       <div class="meter-sub-optimum">
 216       </div>
 217     </div>
 218
 219     <!-- optimum = 0.8 -->
 220     <div class="meter-element">
 221       <div class="meter-sub-sub-optimum">
 222       </div>
 223     </div>
 224     <div class="meter-element">
 225       <div class="meter-sub-sub-optimum">
 226       </div>
 227     </div>
 228     <div class="meter-element">
 229       <div class="meter-sub-optimum">
 230       </div>
 231     </div>
 232     <div class="meter-element">
 233       <div class="meter-sub-optimum">
 234       </div>
 235     </div>
 236     <div class="meter-element">
 237       <div class="meter-sub-optimum">
 238       </div>
 239     </div>
 240     <div class="meter-element">
 241       <div class="meter-optimum">
 242       </div>
 243     </div>
 244     <div class="meter-element">
 245       <div class="meter-optimum">
 246       </div>
 247     </div>
 248
 249     <!-- optimum = 1.0 -->
 250     <div class="meter-element">
 251       <div class="meter-sub-sub-optimum">
 252       </div>
 253     </div>
 254     <div class="meter-element">
 255       <div class="meter-sub-sub-optimum">
 256       </div>
 257     </div>
 258     <div class="meter-element">
 259       <div class="meter-sub-optimum">
 260       </div>
 261     </div>
 262     <div class="meter-element">
 263       <div class="meter-sub-optimum">
 264       </div>
 265     </div>
 266     <div class="meter-element">
 267       <div class="meter-sub-optimum">
 268       </div>
 269     </div>
 270     <div class="meter-element">
 271       <div class="meter-optimum">
 272       </div>
 273     </div>
 274     <div class="meter-element">
 275       <div class="meter-optimum">
 276       </div>
 277     </div>
 278   </body>
 279 </html>