michael@0: <?xml version="1.0"?>
michael@0: <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
michael@0: 
michael@0: <window title="Stretched controls test reference"
michael@0:         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
michael@0:         xmlns:html="http://www.w3.org/1999/xhtml"
michael@0:         xmlns:svg="http://www.w3.org/2000/svg"
michael@0:         orient="vertical"
michael@0:         class="reftest-wait"
michael@0:         onload="loaded()">
michael@0: 
michael@0: <html:style><![CDATA[
michael@0: .regular {
michael@0:   font: -moz-dialog;
michael@0: }
michael@0: .small {
michael@0:   font: message-box;
michael@0: }
michael@0: .spacer {
michael@0:   height: 40px;
michael@0: }
michael@0: .foreground > :nth-child(2) {
michael@0:   display: none; /* <----- This is the only difference from nostretch.xul */
michael@0: }
michael@0: ]]>
michael@0: </html:style>
michael@0: 
michael@0: <script type="application/javascript;version=1.8"><![CDATA[
michael@0: 
michael@0: function cE(elem) {
michael@0:   return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
michael@0: }
michael@0: function elWithValue(elem, val) {
michael@0:   let e = cE(elem);
michael@0:   e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
michael@0:   return e;
michael@0: }
michael@0: 
michael@0: function allPairs(set) {
michael@0:   let ps = [];
michael@0:   for(let i = 0; i < set.length; ++i) {
michael@0:     for (let j = 0; j < set.length; ++j) {
michael@0:       if (i != j)
michael@0:         ps.push([set[i], set[j]]);
michael@0:     }
michael@0:   }
michael@0:   return ps;
michael@0: }
michael@0: 
michael@0: function createLabel(v) elWithValue("label", v)
michael@0: function createRadio(v) elWithValue("radio", v)
michael@0: function createCheckbox(v) elWithValue("checkbox", v)
michael@0: function createButton(v) elWithValue("button", v)
michael@0: function createTextField(v) elWithValue("textbox", v)
michael@0: function createMenulist(v) {
michael@0:   let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
michael@0:   item.setAttribute("selected", "true");
michael@0:   popup.appendChild(item);
michael@0:   list.appendChild(popup);
michael@0:   return list;
michael@0: }
michael@0: function createEditableMenulist(v) {
michael@0:   let list = createMenulist(v);
michael@0:   list.setAttribute("editable", "true");
michael@0:   return list;
michael@0: }
michael@0: function loaded() {
michael@0:   let template = document.getElementById("template");
michael@0:   ["regular", "small"].forEach(function(size) {
michael@0:     let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
michael@0:     allPairs([
michael@0:       createButton, createMenulist, createTextField, createEditableMenulist,
michael@0:     ]).forEach(function(elemList) {
michael@0:       let newBox = template.cloneNode(true);
michael@0:       newBox.className = "spacer";
michael@0:       let foregroundRow = newBox.firstChild;
michael@0:       elemList.forEach(function(creator) {
michael@0:         foregroundRow.appendChild(creator("Label"));
michael@0:       });
michael@0:       wrapper.appendChild(newBox);
michael@0:     });
michael@0:   });
michael@0:   document.documentElement.className = "";
michael@0: }
michael@0: 
michael@0: ]]></script>
michael@0:     <vbox id="template">
michael@0:       <hbox class="foreground"/>
michael@0:     </vbox>
michael@0:   <hbox id="wrapper">
michael@0:     <vbox class="regular" width="500"/>
michael@0:     <vbox class="small" flex="1"/>
michael@0:   </hbox>
michael@0: 
michael@0:   <spacer flex="1"/>
michael@0: 
michael@0: </window>