test/unit/dimensions.js

   1 module("dimensions");
   2
   3 test("width()", function() {
   4         expect(6);
   5
   6         var $div = jQuery("#nothiddendiv");
   7         $div.width(30);
   8         equals($div.width(), 30, "Test set to 30 correctly");
   9         $div.hide();
  10         equals($div.width(), 30, "Test hidden div");
  11         $div.show();
  12         $div.width(-1); // handle negative numbers by ignoring #1599
  13         equals($div.width(), 30, "Test negative width ignored");
  14         $div.css("padding", "20px");
  15         equals($div.width(), 30, "Test padding specified with pixels");
  16         $div.css("border", "2px solid #fff");
  17         equals($div.width(), 30, "Test border specified with pixels");
  18         //$div.css("padding", "2em");
  19         //equals($div.width(), 30, "Test padding specified with ems");
  20         //$div.css("border", "1em solid #fff");
  21         //DISABLED - Opera 9.6 fails this test, returns 8
  22         //equals($div.width(), 30, "Test border specified with ems");
  23         //$div.css("padding", "2%");
  24         //equals($div.width(), 30, "Test padding specified with percent");
  25
  26         $div.css({ display: "", border: "", padding: "" });
  27
  28         jQuery("#nothiddendivchild").css({ padding: "3px", border: "2px solid #fff" });
  29         equals(jQuery("#nothiddendivchild").width(), 20, "Test child width with border and padding");
  30         jQuery("#nothiddendiv, #nothiddendivchild").css({ border: "", padding: "", width: "" });
  31 });
  32
  33 test("height()", function() {
  34         expect(5);
  35
  36         var $div = jQuery("#nothiddendiv");
  37         $div.height(30);
  38         equals($div.height(), 30, "Test set to 30 correctly");
  39         $div.hide();
  40         equals($div.height(), 30, "Test hidden div");
  41         $div.show();
  42         $div.height(-1); // handle negative numbers by ignoring #1599
  43         equals($div.height(), 30, "Test negative height ignored");
  44         $div.css("padding", "20px");
  45         equals($div.height(), 30, "Test padding specified with pixels");
  46         $div.css("border", "2px solid #fff");
  47         equals($div.height(), 30, "Test border specified with pixels");
  48         //$div.css("padding", "2em");
  49         //equals($div.height(), 30, "Test padding specified with ems");
  50         //$div.css("border", "1em solid #fff");
  51         //DISABLED - Opera 9.6 fails this test, returns 8
  52         //equals($div.height(), 30, "Test border specified with ems");
  53         //$div.css("padding", "2%");
  54         //equals($div.height(), 30, "Test padding specified with percent");
  55
  56         $div.css({ display: "", border: "", padding: "", height: "1px" });
  57 });
  58
  59 test("innerWidth()", function() {
  60         expect(3);
  61
  62         var $div = jQuery("#nothiddendiv");
  63         // set styles
  64         $div.css({
  65                 margin: 10,
  66                 border: "2px solid #fff",
  67                 width: 30
  68         });
  69
  70         equals($div.innerWidth(), 30, "Test with margin and border");
  71         $div.css("padding", "20px");
  72         equals($div.innerWidth(), 70, "Test with margin, border and padding");
  73         $div.hide();
  74         equals($div.innerWidth(), 70, "Test hidden div");
  75
  76         // reset styles
  77         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
  78 });
  79
  80 test("innerHeight()", function() {
  81         expect(3);
  82
  83         var $div = jQuery("#nothiddendiv");
  84         // set styles
  85         $div.css({
  86                 margin: 10,
  87                 border: "2px solid #fff",
  88                 height: 30
  89         });
  90
  91         equals($div.innerHeight(), 30, "Test with margin and border");
  92         $div.css("padding", "20px");
  93         equals($div.innerHeight(), 70, "Test with margin, border and padding");
  94         $div.hide();
  95         equals($div.innerHeight(), 70, "Test hidden div");
  96
  97         // reset styles
  98         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
  99 });
 100
 101 test("outerWidth()", function() {
 102         expect(6);
 103
 104         var $div = jQuery("#nothiddendiv");
 105         $div.css("width", 30);
 106
 107         equals($div.outerWidth(), 30, "Test with only width set");
 108         $div.css("padding", "20px");
 109         equals($div.outerWidth(), 70, "Test with padding");
 110         $div.css("border", "2px solid #fff");
 111         equals($div.outerWidth(), 74, "Test with padding and border");
 112         $div.css("margin", "10px");
 113         equals($div.outerWidth(), 74, "Test with padding, border and margin without margin option");
 114         $div.css("position", "absolute");
 115         equals($div.outerWidth(true), 94, "Test with padding, border and margin with margin option");
 116         $div.hide();
 117         equals($div.outerWidth(true), 94, "Test hidden div with padding, border and margin with margin option");
 118
 119         // reset styles
 120         $div.css({ position: "", display: "", border: "", padding: "", width: "", height: "" });
 121 });
 122
 123 test("outerHeight()", function() {
 124         expect(6);
 125
 126         var $div = jQuery("#nothiddendiv");
 127         $div.css("height", 30);
 128
 129         equals($div.outerHeight(), 30, "Test with only width set");
 130         $div.css("padding", "20px");
 131         equals($div.outerHeight(), 70, "Test with padding");
 132         $div.css("border", "2px solid #fff");
 133         equals($div.outerHeight(), 74, "Test with padding and border");
 134         $div.css("margin", "10px");
 135         equals($div.outerHeight(), 74, "Test with padding, border and margin without margin option");
 136         equals($div.outerHeight(true), 94, "Test with padding, border and margin with margin option");
 137         $div.hide();
 138         equals($div.outerHeight(true), 94, "Test hidden div with padding, border and margin with margin option");
 139
 140         // reset styles
 141         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
 142 });