From 25c9c2166bf0f034ed7f297ae011d9d2f52707b1 Mon Sep 17 00:00:00 2001
From: "evaughan%netscape.com" <evaughan%netscape.com>
Date: Fri, 7 Dec 2001 00:56:24 +0000
Subject: [PATCH] Adding grid examples. Not in build.

---
 .../src/grid/examples/borderedcolumns.xul     |  40 ++
 .../src/grid/examples/borderedrowscolumns.xul |  52 +++
 .../grid/examples/borderedrowscolumns2.xul    |  41 ++
 .../grid/examples/borderedrowscolumns3.xul    |  54 +++
 .../grid/examples/bordermargincolumns1.xul    |  41 ++
 .../base/src/grid/examples/collapsetest.xul   |  64 +++
 .../base/src/grid/examples/divcolumngrid.xul  |  30 ++
 .../xul/base/src/grid/examples/divrowgrid.xul |  33 ++
 .../base/src/grid/examples/dynamicgrid.xul    | 367 ++++++++++++++++++
 .../base/src/grid/examples/flexgroupgrid.xul  |  44 +++
 .../src/grid/examples/javascriptappend.xul    |  39 ++
 .../xul/base/src/grid/examples/jumpygrid.xul  |  79 ++++
 .../xul/base/src/grid/examples/nestedrows.xul |  45 +++
 layout/xul/base/src/grid/examples/rowspan.xul |  38 ++
 .../src/grid/examples/scrollingcolumns.xul    |  77 ++++
 .../base/src/grid/examples/scrollingrows.xul  |  77 ++++
 .../xul/base/src/grid/examples/splitter.xul   |  37 ++
 17 files changed, 1158 insertions(+)
 create mode 100644 layout/xul/base/src/grid/examples/borderedcolumns.xul
 create mode 100644 layout/xul/base/src/grid/examples/borderedrowscolumns.xul
 create mode 100644 layout/xul/base/src/grid/examples/borderedrowscolumns2.xul
 create mode 100644 layout/xul/base/src/grid/examples/borderedrowscolumns3.xul
 create mode 100644 layout/xul/base/src/grid/examples/bordermargincolumns1.xul
 create mode 100644 layout/xul/base/src/grid/examples/collapsetest.xul
 create mode 100644 layout/xul/base/src/grid/examples/divcolumngrid.xul
 create mode 100644 layout/xul/base/src/grid/examples/divrowgrid.xul
 create mode 100644 layout/xul/base/src/grid/examples/dynamicgrid.xul
 create mode 100644 layout/xul/base/src/grid/examples/flexgroupgrid.xul
 create mode 100644 layout/xul/base/src/grid/examples/javascriptappend.xul
 create mode 100644 layout/xul/base/src/grid/examples/jumpygrid.xul
 create mode 100644 layout/xul/base/src/grid/examples/nestedrows.xul
 create mode 100644 layout/xul/base/src/grid/examples/rowspan.xul
 create mode 100644 layout/xul/base/src/grid/examples/scrollingcolumns.xul
 create mode 100644 layout/xul/base/src/grid/examples/scrollingrows.xul
 create mode 100644 layout/xul/base/src/grid/examples/splitter.xul

diff --git a/layout/xul/base/src/grid/examples/borderedcolumns.xul b/layout/xul/base/src/grid/examples/borderedcolumns.xul
new file mode 100644
index 000000000000..71f71cd2a1f9
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/borderedcolumns.xul
@@ -0,0 +1,40 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="border: 2px inset gray;" id="grid">
+	   <columns>
+  	      <column style="border: 10px inset red;"/>
+  	      <column/>
+  	      <column style="border: 10px inset red;"/>
+       </columns>
+
+       <rows style="font-size: 20pt;">
+	     <row>
+		   <text value="Cell 1 "/>
+		   <text value="Cell 2 "/>
+		   <text value="Cell 3 "/>
+		 </row>
+	     <row>
+		   <text value="Cell 4 "/>
+		   <text value="Cell 5 " style="border: 10px inset red;"/>
+		   <text value="Cell 6 "/>
+		 </row>
+	     <row>
+		   <text value="Cell 7 "/>
+		   <text value="Cell 8 "/>
+		   <text value="Cell 9 "/>
+		 </row>
+
+	   </rows>
+	</grid>
+  </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/borderedrowscolumns.xul b/layout/xul/base/src/grid/examples/borderedrowscolumns.xul
new file mode 100644
index 000000000000..b2eb1843596b
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/borderedrowscolumns.xul
@@ -0,0 +1,52 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="border: 2px inset gray;" id="grid">
+	   <columns style="border: 0px solid blue">
+  	      <column/>
+  	      <column/>
+  	      <column/>
+       </columns>
+
+       <rows style="font-size: 40pt; border: 15px inset blue">
+	     <row>
+		   <text value="Cell(1)"/>
+		   <text value="Cell(2)"/>
+		   <text value="Cell(3)"/>
+		 </row>
+		   <rows style="border: 10px inset green">
+			 <row>
+			   <text value="Cell(1)"/>
+			   <text value="Cell(2)"/>
+			   <text value="Cell(3)"/>
+			 </row>
+			 <row>
+			   <text value="Cell(4)"/>
+			   <text value="Cell(5)"/>
+			   <text value="Cell(6)"/>
+			 </row>
+			 <row>
+			   <text value="Cell(7)"/>
+			   <text value="Cell(8)"/>
+			   <text value="Cell(9)"/>
+			 </row>
+
+		   </rows>	     
+	     <row>
+		   <text value="Cell(7)"/>
+		   <text value="Cell(8)"/>
+		   <text value="Cell(9)"/>
+		 </row>
+	   </rows>
+	</grid>
+  </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/borderedrowscolumns2.xul b/layout/xul/base/src/grid/examples/borderedrowscolumns2.xul
new file mode 100644
index 000000000000..2ba316ad0698
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/borderedrowscolumns2.xul
@@ -0,0 +1,41 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+<?xml-stylesheet href="gridsample.css" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="border: 2px inset gray;" id="grid">
+	   <columns>
+  	      <column style="border: 10px solid red;"/>
+  	      <column/>
+  	      <column/>
+       </columns>
+
+       <rows style="font-size: 40pt;">
+	     <row style="border: 10px solid red;">
+		   <text value="Cell 1 "/>
+		   <text value="Cell 2 "/>
+		   <text value="Cell 3 "/>
+		 </row>
+	     <row>
+		   <text value="Cell 4 "/>
+		   <text value="Cell 5 "/>
+		   <text value="Cell 6 "/>
+		 </row>
+	     <row>
+		   <text value="Cell 7 "/>
+		   <text value="Cell 8 "/>
+		   <text value="Cell 9 "/>
+		 </row>
+
+	   </rows>
+	</grid>
+  </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/borderedrowscolumns3.xul b/layout/xul/base/src/grid/examples/borderedrowscolumns3.xul
new file mode 100644
index 000000000000..1c9387ba7936
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/borderedrowscolumns3.xul
@@ -0,0 +1,54 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="border: 2px inset gray;" id="grid">
+	   <columns>
+  	      <column/>
+  	      <columns style="border: 10px solid red">
+  	         <column/>
+		  </columns>
+  	      <column/>
+       </columns>
+
+       <rows style="font-size: 24pt">
+	     <row>
+		   <text value="Cell(1)"/>
+		   <text value="Cell(2)"/>
+		   <text value="Cell(3)"/>
+		 </row>
+		   <rows style="border: 10px solid green">
+			 <row>
+			   <text value="Cell(1)"/>
+			   <text value="Cell(2)"/>
+			   <text value="Cell(3)"/>
+			 </row>
+			 <row>
+			   <text value="Cell(4)"/>
+			   <text value="Cell(5)"/>
+			   <text value="Cell(6)"/>
+			 </row>
+			 <row>
+			   <text value="Cell(7)"/>
+			   <text value="Cell(8)"/>
+			   <text value="Cell(9)"/>
+			 </row>
+
+		   </rows>	     
+	     <row>
+		   <text value="Cell(7)"/>
+		   <text value="Cell(8)"/>
+		   <text value="Cell(9)"/>
+		 </row>
+	   </rows>
+	</grid>
+  </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/bordermargincolumns1.xul b/layout/xul/base/src/grid/examples/bordermargincolumns1.xul
new file mode 100644
index 000000000000..1326f4eabd20
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/bordermargincolumns1.xul
@@ -0,0 +1,41 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+<?xml-stylesheet href="gridsample.css" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="border: 2px inset gray;" id="grid">
+	   <columns>
+  	      <column style="border: 10px inset red; margin: 10px; "/>
+  	      <column/>
+  	      <column/>
+       </columns>
+
+       <rows style="font-size: 40pt;">
+	     <row style="border: 5px solid green">
+		   <text value="Cell 1"/>
+		   <text value="Cell 2"/>
+		   <text value="Cell 3"/>
+		 </row>
+	     <row>
+		   <text value="Cell 4"/>
+		   <text value="Cell 5"/>
+		   <text value="Cell 6"/>
+		 </row>
+	     <row>
+		   <text value="Cell 7"/>
+		   <text value="Cell 8"/>
+		   <text value="Cell 9"/>
+		 </row>
+
+	   </rows>
+	</grid>
+  </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/collapsetest.xul b/layout/xul/base/src/grid/examples/collapsetest.xul
new file mode 100644
index 000000000000..a419ec8d207c
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/collapsetest.xul
@@ -0,0 +1,64 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" style="border: 2px solid green"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+<script>
+
+   function collapseTag(id)
+   {
+     var row = window.document.getElementById(id);
+	 row.setAttribute("collapsed","true");
+   }
+
+   function uncollapseTag(id)
+   {
+     var row = window.document.getElementById(id);
+	 row.setAttribute("collapsed","false");
+   }
+
+
+</script>
+
+    <hbox>
+		<grid style="border: 2px solid red;" id="grid">
+		   <columns id="columns1">
+		      <column id="column1"/>
+		      <column id="column2"/>
+		      <column id="column3"/>
+		   </columns>
+
+		   <rows id="rows1" style="font-size: 24pt">
+			 <row id="row1">
+			    <text value="cell1"/>
+			    <text value="cell2"/>
+			    <text value="cell3"/>
+			 </row>
+ 			 <row id="row2">
+			    <text value="cell4"/>
+			    <text value="cell5"/>
+			    <text value="cell6"/>
+			 </row>
+			 <row id="row3">
+			    <text value="cell7"/>
+			    <text value="cell8"/>
+			    <text value="cell9"/>
+			 </row>
+		   </rows>
+		</grid>
+    </hbox>
+	<hbox>
+	  <button label="collapse row 2"   oncommand="collapseTag('row2');"/>
+	  <button label="uncollapse row 2" oncommand="uncollapseTag('row2');"/>
+ 	  <button label="collapse column 2"   oncommand="collapseTag('column2');"/>
+	  <button label="uncollapse column 2" oncommand="uncollapseTag('column2');"/>
+
+	</hbox>
+
+</window>
diff --git a/layout/xul/base/src/grid/examples/divcolumngrid.xul b/layout/xul/base/src/grid/examples/divcolumngrid.xul
new file mode 100644
index 000000000000..71aa63f061b2
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/divcolumngrid.xul
@@ -0,0 +1,30 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" style="border: 2px solid green"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+  <hbox>
+    <grid style="border: 2px solid red;">
+	   <columns>
+          <column/>
+		  <description style="border: 10px inset gray">
+		    hello
+		  </description>
+		  <column/>
+	   </columns>
+     
+	   <rows>
+	     <row>
+			 <text style="font-size: 40px" value="foo1"/>
+			 <text style="font-size: 40px" value="foo2"/>
+		 </row>
+	   </rows>
+	</grid>
+	<spacer flex="1" style="background-color: white"/>
+  </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/divrowgrid.xul b/layout/xul/base/src/grid/examples/divrowgrid.xul
new file mode 100644
index 000000000000..fb03fa38a99e
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/divrowgrid.xul
@@ -0,0 +1,33 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" style="border: 2px solid green"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="width: 100px; border: 2px solid red;">     
+	   <rows>
+	     <row style="font-size: 40px">
+			 <text value="foo1"/>
+			 <text value="foo2"/>
+		 </row>
+		<description>
+			this is some html in the row this should wrap if it is big enough.
+		</description>
+	     <row style="font-size: 40px">
+			 <text value="foo3"/>
+			 <text value="foo4"/>
+		 </row>
+
+	   </rows>
+	</grid>
+	<spacer flex="1" style="background-color: white"/>
+  </hbox>
+
+
+</window>
diff --git a/layout/xul/base/src/grid/examples/dynamicgrid.xul b/layout/xul/base/src/grid/examples/dynamicgrid.xul
new file mode 100644
index 000000000000..b3c8b4f54cf5
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/dynamicgrid.xul
@@ -0,0 +1,367 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+<?xml-stylesheet href="gridsample.css" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" 
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+		onload="start()"> 
+
+<script>
+
+   var selected;
+   var count = 0;
+
+   function isCell(box)
+   {
+     if (box.localName == "row" || 
+	     box.localName == "column" ||
+		 box.localName == "rows" ||
+		 box.localName == "columns" ||
+		 box.localName == "grid")
+		 return false;
+
+	 return true;
+   }
+
+   function start()
+   {
+      selectIt(window.document.getElementById("rows"));
+   }
+
+   function selectIt(box)
+   {
+     if (!box)
+	   return;
+
+     var a = box.getAttribute("selected");
+	 if (a != "true") {
+	   box.setAttribute("selected","true");
+  	   if (selected)
+	      selected.setAttribute("selected","false");
+
+	   selected = box;
+     }
+   }
+
+   function addCellSelectionHandle(box)
+   {
+	 box.setAttribute("oncommand", "selectIt(this);");
+   }
+
+   function addRowColumnSelectionHandle(box)
+   {
+	 box.setAttribute("onclick", "selectIt(this);");
+   }
+
+   function createButton(str)
+   {
+	 var b = document.createElement("button");
+	 b.setAttribute("label", str+count);
+	 count++;
+	 addCellSelectionHandle(b);
+	 return b;
+   }
+
+   function createRow()
+   {
+	 var b = document.createElement("row");
+ 	 b.setAttribute("dynamic","true");
+
+	 addRowColumnSelectionHandle(b);
+	 return b;
+   }
+
+   function createColumn()
+   {
+	 var b = document.createElement("column");
+	 b.setAttribute("dynamic","true");
+	 addRowColumnSelectionHandle(b);
+	 return b;
+   }
+
+   function createText(str)
+   {
+	 var text = document.createElement("text");
+	 text.setAttribute("value", str+count);
+	 count++;
+	 text.setAttribute("style", "font-size: 40pt");
+	 addCellSelectionHandle(text);
+	 return text;
+   }
+
+   function appendElement(element, prepend)
+   {
+     if (!selected)
+	    return;
+
+     setUserAttribute(element);
+
+	 if (selected.localName == "rows") 
+	   appendRow(false);
+     else if (selected.localName == "columns")
+	   appendColumn(false);
+
+	 if (selected.localName == "row" || selected.localName == "column" ) { // is row or column
+		 selected.appendChild(element); 
+	 } else {
+		  var parent = selected.parentNode;
+		  if (prepend)
+		    parent.insertBefore(element, selected);	 
+		  else {
+		    var next = selected.nextSibling;
+			if (next)
+		      parent.insertBefore(element,next);
+			else
+			  parent.appendChild(element);
+		  }
+	 }
+     
+	 selectIt(element);
+   }
+
+   function getRows(box)
+   {
+      return window.document.getElementById("rows");
+   }
+
+   function getColumns(box)
+   {
+      return window.document.getElementById("columns");
+   }
+
+   function setUserAttribute(element)
+   {
+   	 var attributeBox = document.getElementById("attributebox");
+	 var valueBox = document.getElementById("valuebox");
+	 var attribute = attributeBox.value;
+	 var value = valueBox.value;
+	 if (attribute != "")
+	   element.setAttribute(attribute,value);
+   }
+
+   function appendRowColumn(rowColumn, prepend)
+   {
+     if (!selected)
+	    return;
+
+     setUserAttribute(rowColumn); 
+
+     var row = rowColumn;
+
+	 // first see what we are adding.
+
+	 if (isCell(selected)) { // if cell then select row/column
+	   selectIt(selected.parentNode);
+	 }
+
+	 if (selected.localName == "row" || selected.localName == "rows")
+	   if (row.localName == "column") {
+	     selectIt(getColumns(selected)); 
+		 dump("Selecting the column")
+		 dump("Selected="+selected.localName);
+		 }
+
+	 if (selected.localName == "column" || selected.localName == "columns")
+	   if (row.localName == "row")
+	     selectIt(getRows(selected));
+
+	 if (selected.localName == "rows" || selected.localName == "columns" ) 
+	 { // if rows its easy
+		 selected.appendChild(row); 
+	 } else {
+		  var parent = selected.parentNode;
+		  if (prepend)
+		    parent.insertBefore(row, selected);	 
+		  else {
+		    var next = selected.nextSibling;
+			if (next)
+		      parent.insertBefore(row,next);
+			else
+			  parent.appendChild(row);
+		  }
+	 }
+
+     selectIt(row);
+   }
+
+ function appendRow(prepend)
+ {
+   var row = createRow();
+   appendRowColumn(row,prepend);
+ }
+
+
+ function appendColumn(prepend)
+ {
+   var column = createColumn();
+   appendRowColumn(column,prepend);
+ }
+
+
+ function selectRows()
+ {
+    var rows = getRows();
+	if (rows.firstChild)
+      selectIt(rows.firstChild);
+	else
+	  selectIt(rows);
+ }
+
+
+ function selectColumns()
+ {
+    var columns = getColumns();
+	if (columns.firstChild)
+      selectIt(columns.firstChild);
+	else
+	  selectIt(columns);
+ }
+
+ function nextElement()
+ {
+   if (!selected)
+     return;
+
+   selectIt(selected.nextSibling);
+ }
+
+ function previousElement()
+ {
+   if (!selected)
+     return;
+
+   selectIt(selected.previousSibling);
+ }
+
+ function selectRow()
+ {
+   if (!selected)
+     return;
+
+   if (selected.localName == "row")
+     return;
+
+   if (isCell(selected)) {
+     if (selected.parentNode.localName == "row")
+       selectIt(selected.parentNode);
+   }
+ }
+
+ function selectColumn()
+ {
+   if (!selected)
+     return;
+
+   if (selected.localName == "column")
+     return;
+
+   if (isCell(selected)) {
+     if (selected.parentNode.localName == "column")
+       selectIt(selected.parentNode);
+   }
+ }
+
+ function collapseGrid()
+ {
+	 var grid = document.getElementById("grid");
+	 var collapsed = grid.getAttribute("collapsed");
+
+	 if (collapsed == "")
+	   grid.setAttribute("collapsed","true");
+	 else
+   	   grid.setAttribute("collapsed","");
+
+ }
+
+ function collapseElement()
+ {
+   if (selected) {
+	 var collapsed = selected.getAttribute("collapsed");
+
+	 if (collapsed == "")
+	   selected.setAttribute("collapsed","true");
+	 else
+   	   selected.setAttribute("collapsed","");
+	}
+ }
+
+</script>
+
+    <hbox flex="1" style="border: 2px inset gray; overflow: auto">
+	 <vbox flex="1">
+	  <hbox>
+		<grid id="grid" style="border: 2px solid red;">
+		   <columns id="columns">
+		   </columns>
+
+		   <rows start="true" id="rows">
+		   </rows>
+		</grid>
+	    <spacer flex="1"/>
+      </hbox>
+ 	    <spacer flex="1"/>
+	 </vbox>
+    </hbox>
+
+    <grid style="background-color: blue">
+	   <columns>
+             <column flex="1"/> 
+             <column flex="1"/>
+             <column flex="1"/>             
+             <column flex="1"/>
+ 	   </columns>
+	 <rows>
+     
+         <row>
+		  <button label="append row" oncommand="appendRow(false);"/>
+		  <button label="prepend row" oncommand="appendRow(true);"/>
+
+		  <button label="append column" oncommand="appendColumn(false);"/>
+		  <button label="prepend column" oncommand="appendColumn(true);"/>
+		 </row>
+
+        <row>
+
+		 <button label="append button" oncommand="appendElement(createButton('button'),false);"/>
+		 <button label="prepend button" oncommand="appendElement(createButton('button'),true);"/>
+
+		 <button label="append text" oncommand="appendElement(createText('text'),false);"/>
+		 <button label="prepend text" oncommand="appendElement(createText('text'),true);"/>
+
+        </row>
+
+		 <row>
+
+ 	     <button label="select rows" oncommand="selectRows()"/>
+	     <button label="select columns" oncommand="selectColumns()"/>
+
+		 <button label="next" oncommand="nextElement()"/>
+		 <button label="previous" oncommand="previousElement()"/>
+
+        </row>
+
+	<hbox valign="middle" autostretch="never">
+ 	     <button label="collapse/uncollapse grid" flex="1" oncommand="collapseGrid()"/>
+ 	     <button label="collapse/uncollapse element" flex="1" oncommand="collapseElement()"/>
+        </hbox>
+
+
+
+	<hbox>
+
+         <text value="attribute"/>
+		 <textbox id="attributebox" value="" flex="1"/>
+         <text value="value"/>
+		 <textbox id="valuebox" value="" flex="2"/>
+        </hbox>
+
+
+       </rows>
+	</grid>
+
+</window>
diff --git a/layout/xul/base/src/grid/examples/flexgroupgrid.xul b/layout/xul/base/src/grid/examples/flexgroupgrid.xul
new file mode 100644
index 000000000000..8740eb558b44
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/flexgroupgrid.xul
@@ -0,0 +1,44 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+<?xml-stylesheet href="gridsample.css" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+   <hbox>
+      <grid style="border: 2px inset gray;" flex="1">
+         <columns>
+            <columns style="border: 10px solid red" flex="1">
+            <column flex="2"/>
+            <column flex="1"/>
+            </columns>
+            <column flex="1"/>
+         </columns>
+
+         <rows style="font-size: 20pt">
+            <rows>
+               <row>
+                  <text class="yellow" value="CellA"/>
+                  <text class="yellow" value="CellAB"/>
+                  <text class="yellow" value="CellABC"/>
+               </row>
+               <row>
+                  <text class="yellow" value="CellA"/>
+                  <text class="yellow" value="CellAB"/>
+                  <text class="yellow" value="CellABC"/>
+               </row>
+            </rows>
+            <row>
+               <text class="yellow" value="CellA"/>
+               <text class="yellow" value="CellAB"/>
+               <text class="yellow" value="CellABC"/>
+            </row>  
+         </rows>
+      </grid>
+   </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/javascriptappend.xul b/layout/xul/base/src/grid/examples/javascriptappend.xul
new file mode 100644
index 000000000000..98135c178c0e
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/javascriptappend.xul
@@ -0,0 +1,39 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" style="border: 2px solid green"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <script>
+    function start()
+	{
+	   var row = document.getElementById("row");
+	   var text = document.createElement("text");
+	   text.setAttribute("value", "foo");
+	   row.appendChild(text);
+	}
+
+  </script>
+
+  <hbox>
+    <grid style="border: 2px solid red;" id="grid">
+	   <columns>
+	   </columns>
+
+	   <rows>
+	     <row id="row">
+		   <button label="value"/>
+		 </row>
+	   </rows>
+	</grid>
+	<spacer flex="1" style="background-color: white"/>
+  </hbox>
+
+  <button label="insert" oncommand="start()"/>
+
+</window>
diff --git a/layout/xul/base/src/grid/examples/jumpygrid.xul b/layout/xul/base/src/grid/examples/jumpygrid.xul
new file mode 100644
index 000000000000..3b68f0e95e08
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/jumpygrid.xul
@@ -0,0 +1,79 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+<?xml-stylesheet href="gridsample.css" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" style="border: 2px solid green"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+    <script>
+	  function flip(child)
+	  {
+	    var jump = child.getAttribute("jumpy");
+		if (jump != "true")
+		  child.setAttribute("jumpy","true");
+		else
+ 		  child.setAttribute("jumpy","false");
+	  }
+
+	</script>
+    <hbox>
+		<grid style="border: 2px solid yellow;">
+		   <columns>
+		   </columns>
+
+		   <rows>
+			 <row>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			 </row>
+			 <row>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			 </row>
+			 <row>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			 </row>
+			 <row>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			 </row>
+			 <row>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			 </row>
+			 <row>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			   <button label="button" class="jumpy"/>
+			 </row>
+
+		   </rows>
+		</grid>
+		<spacer style="border: 2px solid white;" flex="1"/>
+    </hbox>
+	<spacer style="border: 2px solid white;" flex="1"/>
+
+</window>
diff --git a/layout/xul/base/src/grid/examples/nestedrows.xul b/layout/xul/base/src/grid/examples/nestedrows.xul
new file mode 100644
index 000000000000..078356faac21
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/nestedrows.xul
@@ -0,0 +1,45 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox flex="1">
+    <grid style="border: 2px solid red" flex="1">
+
+     <columns>
+        <column flex="1"/>
+        <column flex="1"/>
+        <column flex="1"/>
+     </columns>
+
+       <rows>
+         <row>
+	   		  <text  value="out1"/>
+	   		  <text  value="out2"/>
+	   		  <text  value="out3"/>
+         </row>
+
+         <rows flex="1" style="border: 10px inset yellow; font-size: 20pt">
+           <row>
+	   	  	  <text  value="in1"/>
+	   	  	  <text  value="in2"/>
+	   	  	  <text  value="in3"/>
+	       </row>
+           <row>
+	   	  	  <text  value="in4"/>
+	   	  	  <text  value="in5"/>
+	   	  	  <text  value="in5"/>
+	       </row>
+	     </rows>
+
+	 </rows>
+
+	</grid>
+  </hbox>
+</window>
diff --git a/layout/xul/base/src/grid/examples/rowspan.xul b/layout/xul/base/src/grid/examples/rowspan.xul
new file mode 100644
index 000000000000..517e62883707
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/rowspan.xul
@@ -0,0 +1,38 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" style="border: 2px solid green"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="border: 2px solid red;">
+	   <columns>
+         <column/>
+         <column/>
+	   </columns>
+     
+	   <rows>
+	     <row style="font-size: 40px">
+			 <text value="foo1"/>
+			 <text value="foo2"/>
+		 </row>
+		<box width="50" style="border:5px inset grey">
+			<text value="hello there. This spans"/>
+		</box>
+	     <row style="font-size: 40px" >
+			 <text value="foo1"/>
+			 <text value="foo2"/>
+		 </row>
+
+	   </rows>
+	</grid>
+	<spacer flex="1" style="background-color: white"/>
+  </hbox>
+
+
+</window>
diff --git a/layout/xul/base/src/grid/examples/scrollingcolumns.xul b/layout/xul/base/src/grid/examples/scrollingcolumns.xul
new file mode 100644
index 000000000000..a57a33d8537d
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/scrollingcolumns.xul
@@ -0,0 +1,77 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox flex="1">
+    <grid style="border: 2px solid red" flex="1">
+
+       <rows>
+				<row flex="1"/>
+				<row flex="1"/>
+				<row flex="1"/>
+           </rows>
+       <columns>
+
+		   <column>
+	   		  <button label="left"/>
+	   		  <button label="left"/>
+	   		  <button label="left"/>
+   		   </column>
+
+         <columns flex="1" style="min-width: 1px; overflow: auto; background-color: green">
+           <column>
+	   	  	  <button label="cell1"/>
+	   	  	  <button label="cell1"/>
+	   	  	  <button label="cell1"/>
+	       </column>
+           <column>
+	   	  	  <button label="cell2"/>
+	   	  	  <button label="cell2"/>
+	   	  	  <button label="cell2"/>
+	       </column>
+           <column>
+	   	  	  <button label="cell3"/>
+	   	  	  <button label="cell3"/>
+	   	  	  <button label="cell3"/>
+	       </column>
+           <column>
+	   	  	  <button label="cell4"/>
+	   	  	  <button label="cell4"/>
+	   	  	  <button label="cell4"/>
+	       </column>
+           <column>
+	   	  	  <button label="cell5"/>
+	   	  	  <button label="cell5"/>
+	   	  	  <button label="cell5"/>
+	       </column>
+           <column>
+	   	  	  <button label="cell6"/>
+	   	  	  <button label="cell6"/>
+	   	  	  <button label="cell6"/>
+	       </column>
+           <column>
+	   	  	  <button label="cell7"/>
+	   	  	  <button label="cell7"/>
+	   	  	  <button label="cell7"/>
+	       </column>
+	   </columns>
+  		   <column>
+	   		  <button label="right"/>
+	   		  <button label="right"/>
+	   		  <button label="right"/>
+   		   </column>
+
+	 </columns>
+
+	</grid>
+	<spacer width="100"/>
+  </hbox>
+  <spacer height="100"/>
+</window>
diff --git a/layout/xul/base/src/grid/examples/scrollingrows.xul b/layout/xul/base/src/grid/examples/scrollingrows.xul
new file mode 100644
index 000000000000..af207dc40b51
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/scrollingrows.xul
@@ -0,0 +1,77 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox flex="1">
+    <grid style="border: 2px solid red" flex="1">
+
+     <columns>
+        <column flex="1"/>
+        <column flex="1"/>
+        <column flex="1"/>
+     </columns>
+
+       <rows>
+		   <row>
+	   		  <button label="left"/>
+	   		  <button label="left"/>
+	   		  <button label="left"/>
+   		   </row>
+
+         <rows flex="1" style="border: 10px inset gray; overflow: auto; background-color: green">
+           <row>
+	   	  	  <button label="cell1"/>
+	   	  	  <button label="cell1"/>
+	   	  	  <button label="cell1"/>
+	       </row>
+           <row>
+	   	  	  <button label="cell2"/>
+	   	  	  <button label="cell2"/>
+	   	  	  <button label="cell2"/>
+	       </row>
+           <row>
+	   	  	  <button label="cell3"/>
+	   	  	  <button label="cell3"/>
+	   	  	  <button label="cell3"/>
+	       </row>
+           <row>
+	   	  	  <button label="cell4"/>
+	   	  	  <button label="cell4"/>
+	   	  	  <button label="cell4"/>
+	       </row>
+           <row>
+	   	  	  <button label="cell5"/>
+	   	  	  <button label="cell5"/>
+	   	  	  <button label="cell5"/>
+	       </row>
+           <row>
+	   	  	  <button label="cell6"/>
+	   	  	  <button label="cell6"/>
+	   	  	  <button label="cell6"/>
+	       </row>
+           <row>
+	   	  	  <button label="cell7"/>
+	   	  	  <button label="cell7"/>
+	   	  	  <button label="cell7"/>
+	       </row>
+	   </rows>
+  		   <row>
+	   		  <button label="right"/>
+	   		  <button label="right"/>
+	   		  <button label="right"/>
+   		   </row>
+
+	 </rows>
+
+	</grid>
+	<spacer width="100"/>
+  </hbox>
+  <spacer height="100"/>
+</window>
diff --git a/layout/xul/base/src/grid/examples/splitter.xul b/layout/xul/base/src/grid/examples/splitter.xul
new file mode 100644
index 000000000000..cec71ee708ed
--- /dev/null
+++ b/layout/xul/base/src/grid/examples/splitter.xul
@@ -0,0 +1,37 @@
+<?xml version="1.0"?> 
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+
+<!DOCTYPE window> 
+
+
+<window orient="vertical" style="border: 2px solid green"
+xmlns:html="http://www.w3.org/TR/REC-html40"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
+
+  <hbox>
+    <grid style="border: 2px solid red;">
+	   <columns>
+         <column style="min-width: 1px"/>
+         <splitter/>
+         <column style="min-width: 1px"/>
+	   </columns>
+     
+	   <rows>
+	     <row>
+			 <text style="font-size: 40px" value="foo1"/>
+			 <text style="font-size: 40px" value="foo2"/>
+		 </row>
+		 <label value="this is some text. This is longer"/>
+	     <row>
+    		 <text style="font-size: 40px" value="foo1"/>
+			 <text style="font-size: 40px" value="foo2"/>
+		 </row>
+
+	   </rows>
+	</grid>
+	<spacer flex="1" style="background-color: white"/>
+  </hbox>
+
+
+</window>