openlayers/tests/manual/rendered-dimensions.html

   1 <html>
   2 <head>
   3 <style type="text/css">
   4  .testDims p{
   5     padding: 20px;
   6 }
   7 </style>
   8 <script src="../../lib/OpenLayers.js"></script>
   9 <script>
  10 function run() {
  11     var out = document.getElementById("out");
  12     var size = OpenLayers.Util.getRenderedDimensions("<p>Content</p>");
  13     var bigger = OpenLayers.Util.getRenderedDimensions("<p>Content</p>", null, {displayClass: 'testDims'});
  14     var overflow = OpenLayers.Util.getRenderedDimensions("<p style='overflow:auto'>Content</p>");
  15     var width = OpenLayers.Util.getRenderedDimensions("<p>Content</p>", new OpenLayers.Size(250, null));
  16     var height = OpenLayers.Util.getRenderedDimensions("<p>Content</p>", new OpenLayers.Size(null, 40));
  17     if ((size.w + 40) == bigger.w && (size.h + 40) == bigger.h) {
  18         out.innerHTML = "bigger Pass:  " + size + ", " + bigger;
  19     } else {
  20         out.innerHTML = "bigger Fail:  " + size + ", " + bigger;
  21     }
  22
  23     if (size.w == overflow.w && size.h == overflow.h) {
  24         out.innerHTML += "<br/>overflow Pass:  " + size + ", " + overflow;
  25     } else {
  26         out.innerHTML += "<br/>overflow Fail:  " + size + ", " + overflow;
  27     }
  28
  29     if (width.w == 250 && width.h == size.h) {
  30         out.innerHTML += "<br/>width Pass:  " + size + ", " + width;
  31     }
  32     else {
  33         out.innerHTML += "<br/>width Fail:  " + size + ", " + width;
  34     }
  35
  36     if (height.h == 40 && height.w == size.w) {
  37         out.innerHTML += "<br/>height Pass:  " + size + ", " + height;
  38     }
  39     else {
  40         out.innerHTML += "<br/>height Fail:  " + size + ", " + height;
  41     }
  42 }
  43 </script>
  44 </head>
  45 <body onload="run()">
  46 <div id="out"></div>
  47 </body>
  48 </html>