tools/perf/page_sets/tough_canvas_cases/many_images/many_images.html

   1 <html>
   2 <head>
   3 <title>Canvas - Many Images</title>
   4 <style>
   5   #sprite-cache {
   6     visibility: hidden;
   7   }
   8 </style>
   9 <script type="text/javascript" src="bench.js"></script>
  10 <script type="text/javascript" src="sprites.js"></script>
  11 <script type="text/javascript">
  12 window.onload = init;
  13
  14 var NUM_SPRITES = 2000;
  15 var canvas;
  16 var context;
  17
  18 function init() {
  19   canvas = document.getElementById('canvas');
  20   context = canvas.getContext('2d');
  21
  22   sprites.init(canvas.width, canvas.height);
  23   var images = document.getElementById('sprite-cache').children;
  24   for (var i = 0, numImages = images.length; i < NUM_SPRITES; ++i) {
  25     sprites.add(images[i % numImages]);
  26   };
  27
  28   bench.run(draw);
  29 };
  30
  31 function draw() {
  32   context.clearRect(0, 0, canvas.width, canvas.height);
  33   sprites.draw(context);
  34 };
  35 </script>
  36 </head>
  37
  38 <body>
  39   <canvas id="canvas" width="800" height = "600">
  40   <div id="sprite-cache">
  41     <img src="images/image1_t.png" />
  42     <img src="images/image2_t.png" />
  43     <img src="images/image3_t.png" />
  44     <img src="images/image4_t.png" />
  45     <img src="images/image5_t.png" />
  46     <img src="images/image6_t.png" />
  47     <img src="images/image7_t.png" />
  48     <img src="images/image8_t.png" />
  49     <img src="images/image9_t.png" />
  50     <img src="images/image10_t.png" />
  51     <img src="images/image11_t.png" />
  52     <img src="images/image12_t.png" />
  53     <img src="images/image13_t.png" />
  54     <img src="images/image14_t.png" />
  55     <img src="images/image15_t.png" />
  56     <img src="images/image16_t.png" />
  57     <img src="images/image17_t.png" />
  58     <img src="images/image18_t.png" />
  59     <img src="images/image19_t.png" />
  60     <img src="images/image20_t.png" />
  61     <img src="images/image21_t.png" />
  62     <img src="images/image22_t.png" />
  63     <img src="images/image23_t.png" />
  64     <img src="images/image24_t.png" />
  65     <img src="images/image25_t.png" />
  66     <img src="images/image26_t.png" />
  67     <img src="images/image27_t.png" />
  68     <img src="images/image28_t.png" />
  69     <img src="images/image29_t.png" />
  70     <img src="images/image30_t.png" />
  71     <img src="images/image31_t.png" />
  72     <img src="images/image32_t.png" />
  73     <img src="images/image33_t.png" />
  74     <img src="images/image34_t.png" />
  75     <img src="images/image35_t.png" />
  76     <img src="images/image36_t.png" />
  77     <img src="images/image37_t.png" />
  78     <img src="images/image38_t.png" />
  79     <img src="images/image39_t.png" />
  80     <img src="images/image40_t.png" />
  81     <img src="images/image41_t.png" />
  82     <img src="images/image42_t.png" />
  83     <img src="images/image43_t.png" />
  84     <img src="images/image44_t.png" />
  85     <img src="images/image45_t.png" />
  86     <img src="images/image46_t.png" />
  87     <img src="images/image47_t.png" />
  88     <img src="images/image48_t.png" />
  89     <img src="images/image49_t.png" />
  90     <img src="images/image50_t.png" />
  91     <img src="images/image51_t.png" />
  92     <img src="images/image52_t.png" />
  93     <img src="images/image53_t.png" />
  94     <img src="images/image54_t.png" />
  95     <img src="images/image55_t.png" />
  96     <img src="images/image56_t.png" />
  97     <img src="images/image57_t.png" />
  98     <img src="images/image58_t.png" />
  99     <img src="images/image59_t.png" />
 100     <img src="images/image60_t.png" />
 101     <img src="images/image61_t.png" />
 102     <img src="images/image62_t.png" />
 103     <img src="images/image63_t.png" />
 104     <img src="images/image64_t.png" />
 105     <img src="images/image65_t.png" />
 106     <img src="images/image66_t.png" />
 107     <img src="images/image67_t.png" />
 108     <img src="images/image68_t.png" />
 109     <img src="images/image69_t.png" />
 110     <img src="images/image70_t.png" />
 111     <img src="images/image71_t.png" />
 112     <img src="images/image72_t.png" />
 113     <img src="images/image73_t.png" />
 114     <img src="images/image74_t.png" />
 115     <img src="images/image75_t.png" />
 116     <img src="images/image76_t.png" />
 117     <img src="images/image77_t.png" />
 118     <img src="images/image78_t.png" />
 119     <img src="images/image79_t.png" />
 120     <img src="images/image80_t.png" />
 121     <img src="images/image81_t.png" />
 122     <img src="images/image82_t.png" />
 123     <img src="images/image83_t.png" />
 124     <img src="images/image84_t.png" />
 125     <img src="images/image85_t.png" />
 126     <img src="images/image86_t.png" />
 127     <img src="images/image87_t.png" />
 128     <img src="images/image88_t.png" />
 129     <img src="images/image89_t.png" />
 130     <img src="images/image90_t.png" />
 131     <img src="images/image91_t.png" />
 132     <img src="images/image92_t.png" />
 133     <img src="images/image93_t.png" />
 134     <img src="images/image94_t.png" />
 135     <img src="images/image95_t.png" />
 136     <img src="images/image96_t.png" />
 137     <img src="images/image97_t.png" />
 138     <img src="images/image98_t.png" />
 139     <img src="images/image99_t.png" />
 140     <img src="images/image100_t.png" />
 141     <img src="images/image101_t.png" />
 142     <img src="images/image102_t.png" />
 143     <img src="images/image103_t.png" />
 144     <img src="images/image104_t.png" />
 145     <img src="images/image105_t.png" />
 146     <img src="images/image106_t.png" />
 147     <img src="images/image107_t.png" />
 148     <img src="images/image108_t.png" />
 149     <img src="images/image109_t.png" />
 150     <img src="images/image110_t.png" />
 151     <img src="images/image111_t.png" />
 152     <img src="images/image112_t.png" />
 153     <img src="images/image113_t.png" />
 154     <img src="images/image114_t.png" />
 155     <img src="images/image115_t.png" />
 156     <img src="images/image116_t.png" />
 157     <img src="images/image117_t.png" />
 158     <img src="images/image118_t.png" />
 159     <img src="images/image119_t.png" />
 160     <img src="images/image120_t.png" />
 161     <img src="images/image121_t.png" />
 162     <img src="images/image122_t.png" />
 163     <img src="images/image123_t.png" />
 164     <img src="images/image124_t.png" />
 165     <img src="images/image125_t.png" />
 166     <img src="images/image126_t.png" />
 167     <img src="images/image127_t.png" />
 168     <img src="images/image128_t.png" />
 169     <img src="images/image129_t.png" />
 170     <img src="images/image130_t.png" />
 171     <img src="images/image131_t.png" />
 172     <img src="images/image132_t.png" />
 173     <img src="images/image133_t.png" />
 174     <img src="images/image134_t.png" />
 175     <img src="images/image135_t.png" />
 176     <img src="images/image136_t.png" />
 177     <img src="images/image137_t.png" />
 178     <img src="images/image138_t.png" />
 179     <img src="images/image139_t.png" />
 180     <img src="images/image140_t.png" />
 181     <img src="images/image141_t.png" />
 182     <img src="images/image142_t.png" />
 183     <img src="images/image143_t.png" />
 184     <img src="images/image144_t.png" />
 185     <img src="images/image145_t.png" />
 186     <img src="images/image146_t.png" />
 187     <img src="images/image147_t.png" />
 188     <img src="images/image148_t.png" />
 189     <img src="images/image149_t.png" />
 190     <img src="images/image150_t.png" />
 191     <img src="images/image151_t.png" />
 192     <img src="images/image152_t.png" />
 193     <img src="images/image153_t.png" />
 194     <img src="images/image154_t.png" />
 195     <img src="images/image155_t.png" />
 196     <img src="images/image156_t.png" />
 197     <img src="images/image157_t.png" />
 198     <img src="images/image158_t.png" />
 199     <img src="images/image159_t.png" />
 200     <img src="images/image160_t.png" />
 201     <img src="images/image161_t.png" />
 202     <img src="images/image162_t.png" />
 203     <img src="images/image163_t.png" />
 204     <img src="images/image164_t.png" />
 205     <img src="images/image165_t.png" />
 206     <img src="images/image166_t.png" />
 207     <img src="images/image167_t.png" />
 208     <img src="images/image168_t.png" />
 209     <img src="images/image169_t.png" />
 210     <img src="images/image170_t.png" />
 211     <img src="images/image171_t.png" />
 212     <img src="images/image172_t.png" />
 213     <img src="images/image173_t.png" />
 214     <img src="images/image174_t.png" />
 215     <img src="images/image175_t.png" />
 216     <img src="images/image176_t.png" />
 217     <img src="images/image177_t.png" />
 218     <img src="images/image178_t.png" />
 219     <img src="images/image179_t.png" />
 220     <img src="images/image180_t.png" />
 221     <img src="images/image181_t.png" />
 222     <img src="images/image182_t.png" />
 223     <img src="images/image183_t.png" />
 224     <img src="images/image184_t.png" />
 225     <img src="images/image185_t.png" />
 226     <img src="images/image186_t.png" />
 227     <img src="images/image187_t.png" />
 228     <img src="images/image188_t.png" />
 229     <img src="images/image189_t.png" />
 230     <img src="images/image190_t.png" />
 231     <img src="images/image191_t.png" />
 232     <img src="images/image192_t.png" />
 233     <img src="images/image193_t.png" />
 234     <img src="images/image194_t.png" />
 235     <img src="images/image195_t.png" />
 236     <img src="images/image196_t.png" />
 237     <img src="images/image197_t.png" />
 238     <img src="images/image198_t.png" />
 239     <img src="images/image199_t.png" />
 240     <img src="images/image200_t.png" />
 241     <img src="images/image201_t.png" />
 242     <img src="images/image202_t.png" />
 243     <img src="images/image203_t.png" />
 244     <img src="images/image204_t.png" />
 245     <img src="images/image205_t.png" />
 246     <img src="images/image206_t.png" />
 247     <img src="images/image207_t.png" />
 248     <img src="images/image208_t.png" />
 249     <img src="images/image209_t.png" />
 250     <img src="images/image210_t.png" />
 251     <img src="images/image211_t.png" />
 252     <img src="images/image212_t.png" />
 253     <img src="images/image213_t.png" />
 254     <img src="images/image214_t.png" />
 255     <img src="images/image215_t.png" />
 256     <img src="images/image216_t.png" />
 257     <img src="images/image217_t.png" />
 258     <img src="images/image218_t.png" />
 259     <img src="images/image219_t.png" />
 260     <img src="images/image220_t.png" />
 261     <img src="images/image221_t.png" />
 262     <img src="images/image222_t.png" />
 263     <img src="images/image223_t.png" />
 264     <img src="images/image224_t.png" />
 265     <img src="images/image225_t.png" />
 266     <img src="images/image226_t.png" />
 267     <img src="images/image227_t.png" />
 268     <img src="images/image228_t.png" />
 269     <img src="images/image229_t.png" />
 270     <img src="images/image230_t.png" />
 271     <img src="images/image231_t.png" />
 272     <img src="images/image232_t.png" />
 273     <img src="images/image233_t.png" />
 274     <img src="images/image234_t.png" />
 275     <img src="images/image235_t.png" />
 276     <img src="images/image236_t.png" />
 277     <img src="images/image237_t.png" />
 278     <img src="images/image238_t.png" />
 279     <img src="images/image239_t.png" />
 280     <img src="images/image240_t.png" />
 281     <img src="images/image241_t.png" />
 282     <img src="images/image242_t.png" />
 283     <img src="images/image243_t.png" />
 284     <img src="images/image244_t.png" />
 285     <img src="images/image245_t.png" />
 286     <img src="images/image246_t.png" />
 287     <img src="images/image247_t.png" />
 288     <img src="images/image248_t.png" />
 289     <img src="images/image249_t.png" />
 290     <img src="images/image250_t.png" />
 291     <img src="images/image251_t.png" />
 292     <img src="images/image252_t.png" />
 293     <img src="images/image253_t.png" />
 294     <img src="images/image254_t.png" />
 295     <img src="images/image255_t.png" />
 296     <img src="images/image256_t.png" />
 297     <img src="images/image257_t.png" />
 298     <img src="images/image258_t.png" />
 299     <img src="images/image259_t.png" />
 300     <img src="images/image260_t.png" />
 301     <img src="images/image261_t.png" />
 302     <img src="images/image262_t.png" />
 303     <img src="images/image263_t.png" />
 304     <img src="images/image264_t.png" />
 305     <img src="images/image265_t.png" />
 306     <img src="images/image266_t.png" />
 307     <img src="images/image267_t.png" />
 308     <img src="images/image268_t.png" />
 309     <img src="images/image269_t.png" />
 310     <img src="images/image270_t.png" />
 311     <img src="images/image271_t.png" />
 312     <img src="images/image272_t.png" />
 313     <img src="images/image273_t.png" />
 314     <img src="images/image274_t.png" />
 315     <img src="images/image275_t.png" />
 316     <img src="images/image276_t.png" />
 317     <img src="images/image277_t.png" />
 318     <img src="images/image278_t.png" />
 319     <img src="images/image279_t.png" />
 320     <img src="images/image280_t.png" />
 321     <img src="images/image281_t.png" />
 322     <img src="images/image282_t.png" />
 323     <img src="images/image283_t.png" />
 324     <img src="images/image284_t.png" />
 325     <img src="images/image285_t.png" />
 326     <img src="images/image286_t.png" />
 327     <img src="images/image287_t.png" />
 328     <img src="images/image288_t.png" />
 329     <img src="images/image289_t.png" />
 330     <img src="images/image290_t.png" />
 331     <img src="images/image291_t.png" />
 332     <img src="images/image292_t.png" />
 333     <img src="images/image293_t.png" />
 334     <img src="images/image294_t.png" />
 335     <img src="images/image295_t.png" />
 336     <img src="images/image296_t.png" />
 337     <img src="images/image297_t.png" />
 338     <img src="images/image298_t.png" />
 339     <img src="images/image299_t.png" />
 340     <img src="images/image300_t.png" />
 341     <img src="images/image301_t.png" />
 342     <img src="images/image302_t.png" />
 343     <img src="images/image303_t.png" />
 344     <img src="images/image304_t.png" />
 345     <img src="images/image305_t.png" />
 346     <img src="images/image306_t.png" />
 347     <img src="images/image307_t.png" />
 348     <img src="images/image308_t.png" />
 349     <img src="images/image309_t.png" />
 350     <img src="images/image310_t.png" />
 351     <img src="images/image311_t.png" />
 352     <img src="images/image312_t.png" />
 353     <img src="images/image313_t.png" />
 354     <img src="images/image314_t.png" />
 355     <img src="images/image315_t.png" />
 356     <img src="images/image316_t.png" />
 357     <img src="images/image317_t.png" />
 358     <img src="images/image318_t.png" />
 359     <img src="images/image319_t.png" />
 360     <img src="images/image320_t.png" />
 361     <img src="images/image321_t.png" />
 362     <img src="images/image322_t.png" />
 363     <img src="images/image323_t.png" />
 364     <img src="images/image324_t.png" />
 365     <img src="images/image325_t.png" />
 366     <img src="images/image326_t.png" />
 367     <img src="images/image327_t.png" />
 368     <img src="images/image328_t.png" />
 369     <img src="images/image329_t.png" />
 370     <img src="images/image330_t.png" />
 371     <img src="images/image331_t.png" />
 372     <img src="images/image332_t.png" />
 373     <img src="images/image333_t.png" />
 374     <img src="images/image334_t.png" />
 375     <img src="images/image335_t.png" />
 376     <img src="images/image336_t.png" />
 377     <img src="images/image337_t.png" />
 378     <img src="images/image338_t.png" />
 379     <img src="images/image339_t.png" />
 380     <img src="images/image340_t.png" />
 381     <img src="images/image341_t.png" />
 382     <img src="images/image342_t.png" />
 383     <img src="images/image343_t.png" />
 384     <img src="images/image344_t.png" />
 385     <img src="images/image345_t.png" />
 386     <img src="images/image346_t.png" />
 387     <img src="images/image347_t.png" />
 388     <img src="images/image348_t.png" />
 389     <img src="images/image349_t.png" />
 390     <img src="images/image350_t.png" />
 391     <img src="images/image351_t.png" />
 392     <img src="images/image352_t.png" />
 393     <img src="images/image353_t.png" />
 394     <img src="images/image354_t.png" />
 395     <img src="images/image355_t.png" />
 396     <img src="images/image356_t.png" />
 397     <img src="images/image357_t.png" />
 398     <img src="images/image358_t.png" />
 399     <img src="images/image359_t.png" />
 400     <img src="images/image360_t.png" />
 401     <img src="images/image361_t.png" />
 402     <img src="images/image362_t.png" />
 403     <img src="images/image363_t.png" />
 404     <img src="images/image364_t.png" />
 405     <img src="images/image365_t.png" />
 406     <img src="images/image366_t.png" />
 407     <img src="images/image367_t.png" />
 408     <img src="images/image368_t.png" />
 409     <img src="images/image369_t.png" />
 410     <img src="images/image370_t.png" />
 411     <img src="images/image371_t.png" />
 412     <img src="images/image372_t.png" />
 413     <img src="images/image373_t.png" />
 414     <img src="images/image374_t.png" />
 415     <img src="images/image375_t.png" />
 416     <img src="images/image376_t.png" />
 417     <img src="images/image377_t.png" />
 418     <img src="images/image378_t.png" />
 419     <img src="images/image379_t.png" />
 420     <img src="images/image380_t.png" />
 421     <img src="images/image381_t.png" />
 422     <img src="images/image382_t.png" />
 423     <img src="images/image383_t.png" />
 424     <img src="images/image384_t.png" />
 425     <img src="images/image385_t.png" />
 426     <img src="images/image386_t.png" />
 427     <img src="images/image387_t.png" />
 428     <img src="images/image388_t.png" />
 429     <img src="images/image389_t.png" />
 430     <img src="images/image390_t.png" />
 431     <img src="images/image391_t.png" />
 432     <img src="images/image392_t.png" />
 433     <img src="images/image393_t.png" />
 434     <img src="images/image394_t.png" />
 435     <img src="images/image395_t.png" />
 436     <img src="images/image396_t.png" />
 437     <img src="images/image397_t.png" />
 438     <img src="images/image398_t.png" />
 439     <img src="images/image399_t.png" />
 440     <img src="images/image400_t.png" />
 441   </div>
 442 </body>
 443 </html>