layout/xul/test/test_windowminmaxsize.xul

   1 <?xml version="1.0"?>
   2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
   3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
   4
   5 <window title="Window Minimum and Maximum Size Tests" onload="nextTest()"
   6         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   7
   8   <script type="application/javascript"
   9           src="chrome://mochikit/content/MochiKit/packed.js"/>
  10   <script type="application/javascript"
  11           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
  12   <script type="application/javascript"
  13           src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
  14
  15 <panel id="panel" onpopupshown="doPanelTest(this)" onpopuphidden="nextPopupTest(this)"
  16        align="start" pack="start" style="-moz-appearance: none; margin: 0; border: 0; padding: 0;">
  17   <resizer id="popupresizer" dir="bottomright" flex="1" width="60" height="60"
  18            style="-moz-appearance: none; margin: 0; border: 0; padding: 0;"/>
  19 </panel>
  20
  21 <script>
  22 <![CDATA[
  23
  24 SimpleTest.waitForExplicitFinish();
  25
  26 var gTestId = -1;
  27
  28 var prefix = "data:application/vnd.mozilla.xul+xml,<?xml-stylesheet href='chrome://global/skin' type='text/css'?><window " +
  29              "xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' " +
  30              "align='start' pack='start' style='-moz-appearance: none; margin: 0; padding: 0; border: 0; ";
  31 var suffix = "><resizer dir='bottomright' flex='1' width='150' height='150' style='-moz-appearance: none; margin: 0; border: 0; padding: 0;'/></window>";
  32 var titledpanel = "<panel noautohide='true' titlebar='normal' minwidth='120' minheight='140'/><label value='Test'/>";
  33
  34 // width and height in the tests below specify the expected size of the window.
  35 // note, win8 has a minimum inner window size of around 122 pixels. Don't go below this on min-width tests.
  36 var tests = [
  37   { testname: "unconstrained",
  38     style: "", attrs: "",
  39     width: 150, height: 150 },
  40   { testname: "constraint min style",
  41     style: "min-width: 180px; min-height: 210px;", attrs: "",
  42     width: 180, height: 210 },
  43   { testname: "constraint max style",
  44     style: "max-width: 125px; max-height: 140px;", attrs: "",
  45     width: 125, height: 140 },
  46   { testname: "constraint min attributes",
  47     style: "", attrs: "minwidth='240' minheight='220'",
  48     width: 240, height: 220 },
  49   { testname: "constraint min attributes with width and height set",
  50     style: "", attrs: "width='190' height='220' minwidth='215' minheight='235'",
  51     width: 215, height: 235 },
  52   { testname: "constraint max attributes",
  53     style: "", attrs: "maxwidth='125' maxheight='95'",
  54     width: 125, height: 95 },
  55   // this gets the inner width as <window minwidth='210'> makes the box 210 pixels wide
  56   { testname: "constraint min width attribute only",
  57     style: "", attrs: "minwidth='210'",
  58     width: 210, height: 150 },
  59   { testname: "constraint max width attribute only",
  60     style: "", attrs: "maxwidth='128'",
  61     width: 128, height: 150 },
  62   { testname: "constraint max width attribute with minheight",
  63     style: "", attrs: "maxwidth='195' width='230' height='120' minheight='180'",
  64     width: 195, height: 180 },
  65   { testname: "constraint minwidth, minheight, maxwidth and maxheight set",
  66     style: "", attrs: "minwidth='120' maxwidth='480' minheight='110' maxheight='470'",
  67     width: 150, height: 150, last: true }
  68 ];
  69
  70 var popupTests = [
  71   { testname: "popup unconstrained",
  72     width: 60, height: 60
  73   },
  74   { testname: "popup with minimum size",
  75     minwidth: 150, minheight: 180,
  76     width: 150, height: 180
  77   },
  78   { testname: "popup with maximum size",
  79     maxwidth: 50, maxheight: 45,
  80     width: 50, height: 45,
  81   },
  82   { testname: "popup with minimum and size",
  83     minwidth: 80, minheight: 70, maxwidth: 250, maxheight: 220,
  84     width: 80, height: 70, last: true
  85   }
  86 ];
  87
  88 function nextTest()
  89 {
  90   // Run through each of the tests above by opening a simple window with
  91   // the attributes or style defined for that test. The comparisons will be
  92   // done by windowOpened. gTestId holds the index into the tests array.
  93   if (++gTestId >= tests.length) {
  94     // Now do the popup tests
  95     gTestId = -1;
  96     SimpleTest.waitForFocus(function () { nextPopupTest(document.getElementById("panel")) } );
  97   }
  98   else {
  99     tests[gTestId].window = window.open(prefix + tests[gTestId].style + "' " + tests[gTestId].attrs + suffix, "_blank", "chrome,resizable=yes");
 100     SimpleTest.waitForFocus(windowOpened, tests[gTestId].window);
 101   }
 102 }
 103
 104 function windowOpened(otherWindow)
 105 {
 106   // Check the width and the width plus one due to bug 696746.
 107   ok(otherWindow.innerWidth == tests[gTestId].width ||
 108      otherWindow.innerWidth == tests[gTestId].width + 1,
 109     tests[gTestId].testname + " width of " + otherWindow.innerWidth + " matches " + tests[gTestId].width);
 110   is(otherWindow.innerHeight, tests[gTestId].height, tests[gTestId].testname + " height");
 111
 112   // On the last test, try moving the resizer to a size larger than the maximum
 113   // and smaller than the minimum. This test is only done on Mac as the other
 114   // platforms use native resizing.
 115   if ('last' in tests[gTestId] && (navigator.platform.indexOf("Mac") == 0)) {
 116     var resizer = otherWindow.document.documentElement.firstChild;
 117     synthesizeMouse(resizer, 4, 4, { type:"mousedown" }, otherWindow);
 118     synthesizeMouse(resizer, 800, 800, { type:"mousemove" }, otherWindow);
 119     is(otherWindow.innerWidth, 480, "Width after maximum resize");
 120     is(otherWindow.innerHeight, 470, "Height after maximum resize");
 121
 122     synthesizeMouse(resizer, -100, -100, { type:"mousemove" }, otherWindow);
 123     is(otherWindow.innerWidth, 120, "Width after minimum resize");
 124     is(otherWindow.innerHeight, 110, "Height after minimum resize");
 125
 126     synthesizeMouse(resizer, 4, 4, { type:"mouseup" }, otherWindow);
 127
 128     // Change the minimum and maximum size and try resizing the window again.
 129     otherWindow.document.documentElement.minWidth = 140;
 130     otherWindow.document.documentElement.minHeight = 130;
 131     otherWindow.document.documentElement.maxWidth = 380;
 132     otherWindow.document.documentElement.maxHeight = 360;
 133
 134     synthesizeMouse(resizer, 4, 4, { type:"mousedown" }, otherWindow);
 135     synthesizeMouse(resizer, 800, 800, { type:"mousemove" }, otherWindow);
 136     is(otherWindow.innerWidth, 380, "Width after changed maximum resize");
 137     is(otherWindow.innerHeight, 360, "Height after changed maximum resize");
 138
 139     synthesizeMouse(resizer, -100, -100, { type:"mousemove" }, otherWindow);
 140     is(otherWindow.innerWidth, 140, "Width after changed minimum resize");
 141     is(otherWindow.innerHeight, 130, "Height after changed minimum resize");
 142
 143     synthesizeMouse(resizer, 4, 4, { type:"mouseup" }, otherWindow);
 144   }
 145
 146   otherWindow.close();
 147   nextTest();
 148 }
 149
 150 function doPanelTest(panel)
 151 {
 152   var rect = panel.getBoundingClientRect();
 153   is(rect.width, popupTests[gTestId].width, popupTests[gTestId].testname + " width");
 154   is(rect.height, popupTests[gTestId].height, popupTests[gTestId].testname + " height");
 155
 156   if ('last' in popupTests[gTestId]) {
 157     var resizer = document.getElementById("popupresizer");
 158     synthesizeMouse(resizer, 4, 4, { type:"mousedown" });
 159     synthesizeMouse(resizer, 800, 800, { type:"mousemove" });
 160
 161     rect = panel.getBoundingClientRect();
 162     is(rect.width, 250, "Popup width after maximum resize");
 163     is(rect.height, 220, "Popup height after maximum resize");
 164
 165     synthesizeMouse(resizer, -100, -100, { type:"mousemove" });
 166
 167     rect = panel.getBoundingClientRect();
 168     is(rect.width, 80, "Popup width after minimum resize");
 169     is(rect.height, 70, "Popup height after minimum resize");
 170
 171     synthesizeMouse(resizer, 4, 4, { type:"mouseup" });
 172   }
 173
 174   panel.hidePopup();
 175 }
 176
 177 function nextPopupTest(panel)
 178 {
 179   if (++gTestId >= popupTests.length) {
 180     // Next, check a panel that has a titlebar to ensure that it is accounted for
 181     // properly in the size.
 182     var titledPanelWindow = window.open(prefix + "'>" + titledpanel + "</window>", "_blank", "chrome,resizable=yes");
 183     SimpleTest.waitForFocus(titledPanelWindowOpened, titledPanelWindow);
 184   }
 185   else {
 186     function setattr(attr) {
 187       if (attr in popupTests[gTestId])
 188         panel.setAttribute(attr, popupTests[gTestId][attr]);
 189       else
 190         panel.removeAttribute(attr);
 191     }
 192     setattr("minwidth");
 193     setattr("minheight");
 194     setattr("maxwidth");
 195     setattr("maxheight");
 196
 197     // Remove the flexibility as it causes the resizer to not shrink down
 198     // when resizing.
 199     if ("last" in popupTests[gTestId])
 200       document.getElementById("popupresizer").removeAttribute("flex");
 201
 202     panel.openPopup();
 203   }
 204 }
 205
 206 function titledPanelWindowOpened(panelwindow)
 207 {
 208   var panel = panelwindow.document.documentElement.firstChild;
 209   panel.openPopup();
 210   panel.addEventListener("popupshown", function() doTitledPanelTest(panel), false);
 211   panel.addEventListener("popuphidden", function() done(panelwindow), false);
 212 }
 213
 214 function doTitledPanelTest(panel)
 215 {
 216   var rect = panel.getBoundingClientRect();
 217   is(rect.width, 120, "panel with titlebar width");
 218   is(rect.height, 140, "panel with titlebar height");
 219   panel.hidePopup();
 220 }
 221
 222 function done(panelwindow)
 223 {
 224   panelwindow.close();
 225   SimpleTest.finish();
 226 }
 227
 228 ]]>
 229 </script>
 230
 231 <body xmlns="http://www.w3.org/1999/xhtml">
 232 <p id="display">
 233 </p>
 234 <div id="content" style="display: none">
 235 </div>
 236 <pre id="test">
 237 </pre>
 238 </body>
 239
 240 </window>