openlayers/tests/Layer/Grid.html

   1 <html>
   2 <head>
   3   <script src="../../lib/OpenLayers.js"></script>
   4   <script type="text/javascript">
   5     var isMozilla = (navigator.userAgent.indexOf("compatible") == -1);
   6     var layer;
   7
   8     var name = 'Test Layer';
   9     var url = "http://octo.metacarta.com/cgi-bin/mapserv";
  10     var params = { map: '/mapdata/vmap_wms.map',
  11                    layers: 'basic',
  12                    format: 'image/png'};
  13
  14     /**
  15      *  NOTE TO READER:
  16      *
  17      *    Some of the tests on the Grid class actually use the WMS class.
  18      *    This is because WMS is a subclass of Grid and it implements the
  19      *    core functions which are necessary to test the tile-generation
  20      *    mechanism.
  21      *
  22      */
  23
  24
  25     function test_Layer_Grid_constructor (t) {
  26         t.plan( 8 );
  27
  28         layer = new OpenLayers.Layer.Grid(name, url, params, null);
  29         t.ok( layer instanceof OpenLayers.Layer.Grid, "returns OpenLayers.Layer.Grid object" );
  30         t.eq( layer.buffer, 2, "buffer default is 2");
  31         t.eq( layer.ratio, 1.5, "ratio default is 1.5");
  32         t.eq( layer.numLoadingTiles, 0, "numLoadingTiles starts at 0");
  33         t.ok( layer.events.listeners["tileloaded"] != null, "'tileloaded' event added to layer's event types");
  34         t.ok( OpenLayers.Util.indexOf(layer.events.eventTypes, 'tileloaded') != -1 ,"'tileloaded' event added to layer's event types");
  35
  36         //regression testing for #1502
  37         t.ok( layer.events.listeners['tileloaded'].length == 0, "no listeners for tileloaded preregister");
  38
  39         var obj = {};
  40         var func = function() {};
  41         layer.events.register('tileloaded', obj, func);
  42
  43         t.ok( layer.events.listeners['tileloaded'].length == 1, "one listener for tileloaded after register");
  44     }
  45
  46
  47     function test_Layer_Grid_inittiles (t) {
  48         t.plan( 2 );
  49         var map = new OpenLayers.Map('map');
  50         layer = new OpenLayers.Layer.WMS(name, url, params);
  51         map.addLayer(layer);
  52         map.setCenter(new OpenLayers.LonLat(0,0),5);
  53         t.eq( layer.grid.length, 7, "Grid rows is correct." );
  54         t.eq( layer.grid[0].length, 6, "Grid cols is correct." );
  55
  56     }
  57
  58     function test_Layer_Grid_clearTiles (t) {
  59         t.plan(3);
  60
  61         var map = new OpenLayers.Map('map');
  62         layer = new OpenLayers.Layer.WMS(name, url, params);
  63         map.addLayer(layer);
  64
  65         map.setCenter(new OpenLayers.LonLat(0,0));
  66
  67         var numTiles = layer.grid.length * layer.grid[0].length;
  68
  69         //our count of how many times tile.destroy() is called
  70         tilesDeleted = 0;
  71
  72         //this will get set to false if we try to destroy a tile that has
  73         // not been unhookedv
  74         allTilesUnhooked = true;
  75
  76         OpenLayers.Tile.Image.prototype._destroy =
  77             OpenLayers.Tile.Image.prototype.destroy;
  78
  79         OpenLayers.Tile.Image.prototype.destroy = function() {
  80             if (!this.unhooked) {
  81                 allTilesUnhooked = false;
  82             }
  83             tilesDeleted++;
  84         }
  85
  86         layer.removeTileMonitoringHooks = function(tile) {
  87             tile.unhooked = true;
  88         }
  89
  90         layer.clearGrid();
  91
  92         t.ok( layer.grid != null, "layer.grid does not get nullified" );
  93         t.eq(tilesDeleted, numTiles, "all tiles destroy()ed properly");
  94         t.ok(allTilesUnhooked, "all tiles unhooked before being destroyed");
  95
  96         OpenLayers.Tile.Image.prototype.destroy =
  97             OpenLayers.Tile.Image.prototype._destroy;
  98
  99     }
 100
 101
 102     function test_Layer_Grid_getTilesBounds(t) {
 103         t.plan( 4 );
 104
 105         layer = new OpenLayers.Layer.WMS(name, url, params);
 106
 107
 108     //normal grid
 109         var bl = { bounds: new OpenLayers.Bounds(1,2,0,0)};
 110         var tr = { bounds: new OpenLayers.Bounds(0,0,3,4)};
 111         layer.grid = [ [6, tr],
 112                        [bl, 7]];
 113
 114         var bounds = layer.getTilesBounds();
 115         var testBounds = new OpenLayers.Bounds(1,2,3,4);
 116
 117         t.ok( bounds.equals(testBounds), "getTilesBounds() returns correct bounds");
 118
 119         var bounds = layer.getGridBounds();
 120
 121         t.ok( bounds.equals(testBounds), "getGridBounds() wrapper works the same as getTilesBounds.");
 122
 123     //no tiles
 124         layer.grid = [];
 125         bounds = layer.getTilesBounds();
 126
 127         t.ok(bounds == null, "getTilesBounds() on a tile-less grid returns null");
 128
 129
 130     //singleTile
 131         var singleTile = { bounds: new OpenLayers.Bounds(1,2,3,4)};
 132         layer.grid = [ [ singleTile ] ];
 133         bounds = layer.getTilesBounds();
 134
 135         t.ok( bounds.equals(testBounds), "getTilesBounds() returns correct bounds");
 136
 137     }
 138
 139     function test_Layer_Grid_getResolution(t) {
 140         t.plan( 1 );
 141
 142         var map = new OpenLayers.Map('map');
 143         layer = new OpenLayers.Layer.WMS(name, url, params);
 144         map.addLayer(layer);
 145
 146         map.zoom = 5;
 147
 148         t.eq( layer.getResolution(), 0.0439453125, "getResolution() returns correct value");
 149     }
 150
 151     function test_Layer_Grid_getZoomForExtent(t) {
 152         t.plan( 2 );
 153         var bounds, zoom;
 154
 155         var map = new OpenLayers.Map('map');
 156         layer = new OpenLayers.Layer.WMS(name, url, params);
 157         map.addLayer(layer);
 158
 159         bounds = new OpenLayers.Bounds(10,10,12,12);
 160         zoom = layer.getZoomForExtent(bounds);
 161
 162         t.eq( zoom, 8, "getZoomForExtent() returns correct value");
 163
 164         bounds = new OpenLayers.Bounds(10,10,100,100);
 165         zoom = layer.getZoomForExtent(bounds);
 166
 167         t.eq( zoom, 2, "getZoomForExtent() returns correct value");
 168     }
 169
 170     function test_Layer_Grid_moveTo(t) {
 171
 172     t.plan(13);
 173
 174         var map = new OpenLayers.Map('map');
 175         layer = new OpenLayers.Layer.WMS(name, url, params);
 176         layer.destroy = function() {}; //we're going to do funky things with the grid
 177         map.addLayer(layer);
 178
 179     //make sure null bounds doesnt cause script error.
 180     // no test necessary, just action
 181         map.getExtent = function() { return null; }
 182         layer.singleTile = false;
 183         layer.moveTo(); //checks to make sure null bounds doesnt break us
 184
 185
 186
 187       //observing globals
 188         layer.initSingleTile = function(bounds) {
 189             g_WhichFunc = "InitSingle";
 190             g_Bounds = bounds;
 191         };
 192         layer.initGriddedTiles = function(bounds) {
 193             g_WhichFunc = "InitGridded";
 194             g_Bounds = bounds;
 195         };
 196         layer.moveGriddedTiles = function(bounds) {
 197             g_WhichFunc = "MoveGridded";
 198             g_Bounds = bounds;
 199         };
 200         var clearTestBounds = function() {
 201             g_WhichFunc = null;
 202             g_Bounds = null;
 203         };
 204
 205       //default map extent (tested every time below)
 206         b = new OpenLayers.Bounds(0,0,100,100);
 207         map.getExtent = function() {
 208             return b;
 209         };
 210         var tilesBounds = null;
 211         layer.getTilesBounds = function() {
 212             return tilesBounds;
 213         }
 214
 215
 216 //FORCE
 217
 218     //empty grid
 219         layer.grid = [];
 220        //grid
 221         clearTestBounds();
 222         layer.singleTile = false;
 223         layer.moveTo()
 224         t.ok(g_Bounds.equals(b), "if grid is empty, initGridded called");
 225
 226        //singletile
 227         clearTestBounds();
 228         layer.singleTile = true;
 229         layer.moveTo()
 230         t.ok(g_Bounds.equals(b), "if grid is empty, initSingleTile called");
 231
 232     //zoomChanged
 233         zoomChanged = true;
 234         layer.grid = [ [ {} ] ];
 235
 236        //grid
 237         clearTestBounds();
 238         layer.singleTile = false;
 239         layer.moveTo(null, zoomChanged);
 240         t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initGridded called");
 241
 242        //singletile
 243         clearTestBounds();
 244         layer.singleTile = true;
 245         layer.moveTo(null, zoomChanged);
 246         t.ok(g_Bounds.equals(b), "if layer has grid but zoomChanged is called, initSingleTile called");
 247
 248
 249         layer.getTilesBounds = function() {
 250             return tilesBounds;
 251         }
 252
 253
 254
 255 //NO FORCE
 256         zoomChanged = false;
 257         layer.grid = [ [ {} ] ];
 258
 259    //single tile
 260         layer.singleTile = true;
 261
 262       //DRAGGING
 263         var dragging = true;
 264
 265         //in bounds
 266         clearTestBounds();
 267         tilesBounds = new OpenLayers.Bounds(-10,-10,110,110);
 268         layer.moveTo(null, zoomChanged, dragging);
 269         t.ok(g_Bounds == null, "if dragging and tile in bounds, no init()");
 270
 271         //out bounds
 272         clearTestBounds();
 273         tilesBounds = new OpenLayers.Bounds(10,10,120,120);
 274         layer.moveTo(null, zoomChanged, dragging);
 275         t.ok(g_Bounds == null, "if dragging and tile out of bounds, no init()");
 276
 277       //NOT DRAGGING
 278         dragging = false;
 279
 280         //in bounds
 281         clearTestBounds();
 282         tilesBounds = new OpenLayers.Bounds(-10,-10,110,110);
 283         layer.moveTo(null, zoomChanged, dragging);
 284         t.ok(g_Bounds == null, "if dragging and tile in bounds, no init()");
 285
 286         //out bounds
 287         clearTestBounds();
 288         tilesBounds = new OpenLayers.Bounds(10,10,120,120);
 289         layer.moveTo(null, zoomChanged, dragging);
 290         t.ok(g_WhichFunc == "InitSingle", "if not dragging and tile out of bounds, we call initSingleTile()");
 291         t.ok(g_Bounds.equals(b), "if not dragging and tile out of bounds, we call initSingleTile() with correct bounds");
 292
 293
 294    //gridded
 295         layer.grid = [ [ {} ] ];
 296         layer.singleTile = false;
 297
 298         // drastic pan
 299         clearTestBounds();
 300         tilesBounds = new OpenLayers.Bounds(-150,-150,-120,-120);
 301         layer.moveTo(null, zoomChanged);
 302         t.ok(g_WhichFunc == "InitGridded", "if tiles drastically out of bounds, we call initGriddedTile()");
 303         t.ok(g_Bounds.equals(b), "if tiles drastically out of bounds, we call initGriddedTile() with correct bounds");
 304
 305         //regular move
 306         clearTestBounds();
 307         tilesBounds = new OpenLayers.Bounds(10,10,120,120);
 308         layer.moveTo(null, zoomChanged);
 309         t.ok(g_WhichFunc == "MoveGridded", "if tiles not drastically out of bounds, we call moveGriddedTile()");
 310         t.ok(g_Bounds.equals(b), "if tiles not drastically out of bounds, we call moveGriddedTile() with correct bounds");
 311     }
 312
 313     /** THIS WOULD BE WHERE THE TESTS WOULD GO FOR
 314      *
 315      *    -insertColumn
 316      *    -insertRow
 317      *
 318
 319     function 08_Layer_Grid_insertColumn(t) {
 320     }
 321
 322     function 09_Layer_Grid_insertRow(t) {
 323     }
 324
 325      *
 326      */
 327
 328     function test_Layer_Grid_clone(t) {
 329         t.plan(5);
 330
 331         var options = {tileSize: new OpenLayers.Size(500,50)};
 332         var map = new OpenLayers.Map('map', options);
 333         layer = new OpenLayers.Layer.Grid(name, url, params);
 334         map.addLayer(layer);
 335
 336         layer.grid = [ [6, 7],
 337                        [8, 9]];
 338
 339         var clone = layer.clone();
 340
 341         t.ok( clone.grid != layer.grid, "clone does not copy grid");
 342         t.ok( clone.grid.length == 0, "clone creates a new array instead");
 343
 344         t.ok( clone.tileSize.equals(layer.tileSize), "tileSize correctly cloned");
 345
 346         layer.tileSize.w += 40;
 347
 348         t.eq( clone.tileSize.w, 500, "changing layer.tileSize does not change clone.tileSize -- a fresh copy was made, not just copied reference");
 349
 350         t.eq( clone.alpha, layer.alpha, "alpha copied correctly");
 351
 352         layer.grid = null;
 353     }
 354
 355     function test_Layer_Grid_setTileSize(t) {
 356         t.plan(1);
 357
 358         OpenLayers.Layer.HTTPRequest.prototype._setTileSize =
 359             OpenLayers.Layer.HTTPRequest.prototype.setTileSize;
 360
 361         OpenLayers.Layer.HTTPRequest.prototype.setTileSize = function(size) {
 362             g_Size = size;
 363         };
 364
 365
 366         layer = new OpenLayers.Layer.Grid(name, url, params, {
 367             singleTile: true
 368         });
 369         mapSize = new OpenLayers.Size(100,1000);
 370         layer.map = {
 371             getSize: function() { return mapSize; }
 372         }
 373
 374         g_Size = null;
 375         layer.setTileSize();
 376
 377         var idealSize = new OpenLayers.Size(150,1500);
 378         t.ok( g_Size && g_Size.equals(idealSize), "correctly calculated tile size passed to superclass setTileSize() function");
 379
 380         OpenLayers.Layer.HTTPRequest.prototype.setTileSize =
 381             OpenLayers.Layer.HTTPRequest.prototype._setTileSize;
 382     }
 383
 384     function test_Layer_Grid_initSingleTile(t) {
 385       t.plan( 11 );
 386
 387         layer = new OpenLayers.Layer.Grid(name, url, params, {
 388             singleTile: true,
 389             ratio: 2
 390         });
 391
 392         var bounds = new OpenLayers.Bounds(-10,10,50,100);
 393
 394         var desiredTileBounds = new OpenLayers.Bounds(-40,-35,80,145);
 395         var desiredUL = new OpenLayers.LonLat(-40,145);
 396
 397         translatedPX = {};
 398         layer.map = {
 399             getLayerPxFromLonLat: function(ul) {
 400                 t.ok(ul.equals(desiredUL), "correct ul passed to translation");
 401                 return translatedPX;
 402             }
 403         }
 404
 405         var newTile = {
 406             draw: function() {
 407                 t.ok(true, "newly created tile has been drawn");
 408             }
 409         };
 410         layer.addTile = function(tileBounds, px) {
 411             t.ok(tileBounds.equals(desiredTileBounds), "correct tile bounds passed to addTile to create new tile");
 412             t.ok(px == translatedPX, "correct tile px passed to addTile to create new tile");
 413             return newTile;
 414         };
 415         layer.addTileMonitoringHooks = function(tile) {
 416             t.ok(tile == newTile, "adding monitoring hooks to the newly added tile");
 417         };
 418         layer.removeExcessTiles = function(x,y) {
 419             t.ok(x == 1 && y == 1, "removeExcessTiles called")
 420         };
 421
 422
 423         layer.grid = [];
 424         layer.initSingleTile(bounds);
 425
 426         t.ok(layer.grid[0][0] == newTile, "grid's 0,0 is set to the newly created tile");
 427
 428         var tile = {
 429             moveTo: function(tileBounds, px) {
 430                 t.ok(tileBounds.equals(desiredTileBounds), "correct tile bounds passed to tile.moveTo()");
 431                 t.ok(px == translatedPX, "correct tile px passed to tile.moveTo()");
 432             }
 433         };
 434         layer.grid = [[ tile ]];
 435         layer.initSingleTile(bounds);
 436
 437     }
 438
 439     function test_Layer_Grid_addTileMonitoringHooks(t) {
 440         t.plan(14);
 441
 442         layer = new OpenLayers.Layer.Grid();
 443         layer.events = {
 444             'triggerEvent': function(str) {
 445                 g_events.push(str);
 446             }
 447         }
 448
 449         var tile = {
 450             events: {
 451                 register: function(name, obj, func) {
 452                     g_registered[name] = [obj, func];
 453                 }
 454             }
 455         }
 456
 457         g_registered = {};
 458         g_events = [];
 459
 460         layer.addTileMonitoringHooks(tile);
 461
 462     //loadstart
 463         t.ok(tile.onLoadStart != null, "onLoadStart function created and added to tile");
 464         entry =  g_registered["loadstart"];
 465         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadStart, "loadstart correctly registered");
 466
 467         layer.numLoadingTiles = 0;
 468         g_events = [];
 469         tile.onLoadStart.apply(layer);
 470
 471         t.eq(g_events[0], "loadstart", "loadstart event triggered when numLoadingTiles is 0");
 472         t.eq(layer.numLoadingTiles, 1, "numLoadingTiles incremented");
 473
 474         g_events = [];
 475         tile.onLoadStart.apply(layer);
 476         t.eq(g_events.length, 0, "loadstart event not triggered when numLoadingTiles is not 0");
 477         t.eq(layer.numLoadingTiles, 2, "numLoadingTiles incremented");
 478
 479
 480     //loadend
 481         t.ok(tile.onLoadEnd != null, "onLoadEnd function created and added to tile");
 482         entry = g_registered["loadend"];
 483         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadEnd, "loadend correctly registered");
 484
 485         layer.numLoadingTiles = 2;
 486         g_events = [];
 487         tile.onLoadEnd.apply(layer);
 488         t.eq(g_events[0], "tileloaded", "tileloaded triggered when numLoadingTiles is > 0");
 489         t.eq(g_events.length, 1, "loadend event not triggered when numLoadingTiles is > 0");
 490         t.eq(layer.numLoadingTiles, 1, "numLoadingTiles decremented");
 491
 492
 493         g_events = [];
 494         tile.onLoadEnd.apply(layer);
 495         t.eq(g_events[0], "tileloaded", "tileloaded triggered when numLoadingTiles is 0");
 496         t.eq(g_events[1], "loadend", "loadend event triggered when numLoadingTiles is 0");
 497         t.eq(layer.numLoadingTiles, 0, "numLoadingTiles decremented");
 498     }
 499
 500     function test_Layer_Grid_removeTileMonitoringHooks(t) {
 501         t.plan(2);
 502
 503         layer = new OpenLayers.Layer.Grid();
 504
 505         var tile = {
 506             onLoadStart: {},
 507             onLoadEnd: {},
 508             unload: function() {},
 509             events: {
 510                 unregister: function(name, obj, func) {
 511                     g_unregistered[name] = [obj, func];
 512                 },
 513                 un: OpenLayers.Events.prototype.un
 514             }
 515         }
 516
 517         g_unregistered = {};
 518
 519         layer.removeTileMonitoringHooks(tile);
 520
 521         entry =  g_unregistered["loadstart"];
 522         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadStart, "loadstart correctly unregistered");
 523
 524         entry =  g_unregistered["loadend"];
 525         t.ok( entry && entry[0] == layer && entry[1] == tile.onLoadEnd, "loadend correctly unregistered");
 526     }
 527
 528     function test_Layer_Grid_tileSizeIsInteger(t) {
 529             t.plan(1);
 530
 531         var map = new OpenLayers.Map('map');
 532             var layer = new OpenLayers.Layer.Grid(name, url, params, {
 533             singleTile: true,
 534             ratio: 1.5
 535         });
 536         map.addLayers([layer]);
 537
 538         width = layer.tileSize.w;
 539         height = layer.tileSize.h;
 540         t.ok(width == parseInt(width) && height == parseInt(height), "calculated tileSize width/height are integer values");
 541     }
 542     function test_Layer_Grid_getTileBounds(t) {
 543         t.plan(2);
 544         var map = new OpenLayers.Map("map2");
 545         var url = "http://octo.metacarta.com/cgi-bin/mapserv";
 546         layer = new OpenLayers.Layer.WMS(name, url, params);
 547
 548         var newParams = { layers: 'sooper',
 549                           chickpeas: 'image/png'};
 550
 551         map.addLayer(layer);
 552         map.zoomToMaxExtent();
 553         map.zoomIn();
 554         var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200));
 555         t.eq(bounds.toBBOX(), "-180,-90,0,90", "get tile bounds returns correct bounds");
 556         map.pan(200,0, {animate:false});
 557         var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200));
 558         t.eq(bounds.toBBOX(), "0,-90,180,90", "get tile bounds returns correct bounds after pan");
 559     }
 560
 561     function test_Layer_Grid_moveTo_buffer_calculation (t) {
 562         t.plan(6);
 563
 564         var map = new OpenLayers.Map( 'map3' ); // odd map size
 565         var layer0 = new OpenLayers.Layer.WMS( "0 buffer: OpenLayers WMS",
 566                     "http://labs.metacarta.com/wms/vmap0",
 567                     {layers: 'basic'}, {'buffer':0} );
 568         map.addLayer(layer0);
 569
 570         var layer1 = new OpenLayers.Layer.WMS( "1 buffer: OpenLayers WMS",
 571                 "http://labs.metacarta.com/wms/vmap0",
 572                 {layers: 'basic'}, {'buffer':1} );
 573         map.addLayer(layer1);
 574
 575         var layer2 = new OpenLayers.Layer.WMS( "2 buffer: OpenLayers WMS",
 576                 "http://labs.metacarta.com/wms/vmap0",
 577                 {layers: 'basic'}, {'buffer':2} );
 578         map.addLayer(layer2);
 579
 580         map.setCenter(new OpenLayers.LonLat(0, 0), 4);
 581         t.eq( layer0.grid.length, 3, "Grid rows with buffer:0" );
 582         map.setBaseLayer(layer1);
 583         t.eq( layer1.grid.length, 4, "Grid rows with buffer:1" );
 584         map.setBaseLayer(layer2);
 585         t.eq( layer2.grid.length, 6, "Grid rows with buffer:2" );
 586
 587         // zooming in on Greenland exercises the bug from pre-r4313
 588         map.setCenter(new OpenLayers.LonLat(0, 90), 4);
 589         t.eq( layer0.grid.length, 3, "Grid rows with buffer:0" );
 590         map.setBaseLayer(layer1);
 591         t.eq( layer1.grid.length, 4, "Grid rows with buffer:1" );
 592         map.setBaseLayer(layer2);
 593         t.eq( layer2.grid.length, 6, "Grid rows with buffer:2" );
 594     }
 595
 596     function test_Layer_Grid_destroy (t) {
 597
 598         t.plan( 5 );
 599
 600         var map = new OpenLayers.Map('map');
 601         layer = new OpenLayers.Layer.Grid(name, url, params);
 602         map.addLayer(layer);
 603         layer.destroy();
 604         t.eq( layer.grid, null, "layer.grid is null after destroy" );
 605         t.eq( layer.tileSize, null, "layer.tileSize is null after destroy" );
 606
 607
 608     //test with tile creation
 609         layer = new OpenLayers.Layer.WMS(name, url, params);
 610         map.addLayer(layer);
 611
 612         map.setCenter(new OpenLayers.LonLat(0,0), 10);
 613
 614
 615         //grab a reference to one of the tiles
 616         var tile = layer.grid[1][1];
 617         t.eq( tile.imgDiv.className, "olTileImage", "Tile has an image" );
 618
 619         layer.destroy();
 620         t.eq( tile.imgDiv, null, "Tile destroyed" );
 621
 622         t.ok( layer.grid == null, "tiles appropriately destroyed")
 623     }
 624
 625
 626   </script>
 627 </head>
 628 <body>
 629 <div id="map" style="width:499px;height:549px;display:none"></div>
 630 <div id="map2" style="width:500px;height:550px;display:none"></div>
 631 <div id="map3" style="width:594px;height:464px;display:none"></div>
 632 </body>
 633 </html>