test/unit/dimensions.js

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