summaryrefslogtreecommitdiff
path: root/layout/xul/grid/examples
diff options
context:
space:
mode:
Diffstat (limited to 'layout/xul/grid/examples')
-rw-r--r--layout/xul/grid/examples/borderedcolumns.xul43
-rw-r--r--layout/xul/grid/examples/borderedrowscolumns.xul55
-rw-r--r--layout/xul/grid/examples/borderedrowscolumns2.xul44
-rw-r--r--layout/xul/grid/examples/borderedrowscolumns3.xul57
-rw-r--r--layout/xul/grid/examples/bordermargincolumns1.xul44
-rw-r--r--layout/xul/grid/examples/collapsetest.xul67
-rw-r--r--layout/xul/grid/examples/divcolumngrid.xul33
-rw-r--r--layout/xul/grid/examples/divrowgrid.xul36
-rw-r--r--layout/xul/grid/examples/dynamicgrid.xul370
-rw-r--r--layout/xul/grid/examples/flexgroupgrid.xul47
-rw-r--r--layout/xul/grid/examples/javascriptappend.xul42
-rw-r--r--layout/xul/grid/examples/jumpygrid.xul82
-rw-r--r--layout/xul/grid/examples/nestedrows.xul48
-rw-r--r--layout/xul/grid/examples/rowspan.xul41
-rw-r--r--layout/xul/grid/examples/scrollingcolumns.xul80
-rw-r--r--layout/xul/grid/examples/scrollingrows.xul80
-rw-r--r--layout/xul/grid/examples/splitter.xul40
17 files changed, 1209 insertions, 0 deletions
diff --git a/layout/xul/grid/examples/borderedcolumns.xul b/layout/xul/grid/examples/borderedcolumns.xul
new file mode 100644
index 0000000000..15ee069114
--- /dev/null
+++ b/layout/xul/grid/examples/borderedcolumns.xul
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/borderedrowscolumns.xul b/layout/xul/grid/examples/borderedrowscolumns.xul
new file mode 100644
index 0000000000..94d3d8d998
--- /dev/null
+++ b/layout/xul/grid/examples/borderedrowscolumns.xul
@@ -0,0 +1,55 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/borderedrowscolumns2.xul b/layout/xul/grid/examples/borderedrowscolumns2.xul
new file mode 100644
index 0000000000..96b6ca9e5a
--- /dev/null
+++ b/layout/xul/grid/examples/borderedrowscolumns2.xul
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="gridsample.css" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/borderedrowscolumns3.xul b/layout/xul/grid/examples/borderedrowscolumns3.xul
new file mode 100644
index 0000000000..30a6fcc1be
--- /dev/null
+++ b/layout/xul/grid/examples/borderedrowscolumns3.xul
@@ -0,0 +1,57 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/bordermargincolumns1.xul b/layout/xul/grid/examples/bordermargincolumns1.xul
new file mode 100644
index 0000000000..009f932a8c
--- /dev/null
+++ b/layout/xul/grid/examples/bordermargincolumns1.xul
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="gridsample.css" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/collapsetest.xul b/layout/xul/grid/examples/collapsetest.xul
new file mode 100644
index 0000000000..5e1a042f61
--- /dev/null
+++ b/layout/xul/grid/examples/collapsetest.xul
@@ -0,0 +1,67 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical" style="border: 2px solid green"
+ 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/grid/examples/divcolumngrid.xul b/layout/xul/grid/examples/divcolumngrid.xul
new file mode 100644
index 0000000000..2268c302cb
--- /dev/null
+++ b/layout/xul/grid/examples/divcolumngrid.xul
@@ -0,0 +1,33 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical" style="border: 2px solid green"
+ 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/grid/examples/divrowgrid.xul b/layout/xul/grid/examples/divrowgrid.xul
new file mode 100644
index 0000000000..657553aab3
--- /dev/null
+++ b/layout/xul/grid/examples/divrowgrid.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical" style="border: 2px solid green"
+ 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/grid/examples/dynamicgrid.xul b/layout/xul/grid/examples/dynamicgrid.xul
new file mode 100644
index 0000000000..d718df5f91
--- /dev/null
+++ b/layout/xul/grid/examples/dynamicgrid.xul
@@ -0,0 +1,370 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="gridsample.css" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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 align="center">
+ <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/grid/examples/flexgroupgrid.xul b/layout/xul/grid/examples/flexgroupgrid.xul
new file mode 100644
index 0000000000..f4cd6622cd
--- /dev/null
+++ b/layout/xul/grid/examples/flexgroupgrid.xul
@@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="gridsample.css" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/javascriptappend.xul b/layout/xul/grid/examples/javascriptappend.xul
new file mode 100644
index 0000000000..f2a415cae2
--- /dev/null
+++ b/layout/xul/grid/examples/javascriptappend.xul
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical" style="border: 2px solid green"
+ 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/grid/examples/jumpygrid.xul b/layout/xul/grid/examples/jumpygrid.xul
new file mode 100644
index 0000000000..8bbeb5806a
--- /dev/null
+++ b/layout/xul/grid/examples/jumpygrid.xul
@@ -0,0 +1,82 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.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="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/grid/examples/nestedrows.xul b/layout/xul/grid/examples/nestedrows.xul
new file mode 100644
index 0000000000..700f785b39
--- /dev/null
+++ b/layout/xul/grid/examples/nestedrows.xul
@@ -0,0 +1,48 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/rowspan.xul b/layout/xul/grid/examples/rowspan.xul
new file mode 100644
index 0000000000..266a32229f
--- /dev/null
+++ b/layout/xul/grid/examples/rowspan.xul
@@ -0,0 +1,41 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical" style="border: 2px solid green"
+ 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/grid/examples/scrollingcolumns.xul b/layout/xul/grid/examples/scrollingcolumns.xul
new file mode 100644
index 0000000000..f299096248
--- /dev/null
+++ b/layout/xul/grid/examples/scrollingcolumns.xul
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/scrollingrows.xul b/layout/xul/grid/examples/scrollingrows.xul
new file mode 100644
index 0000000000..fd5077cde3
--- /dev/null
+++ b/layout/xul/grid/examples/scrollingrows.xul
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical"
+ 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/grid/examples/splitter.xul b/layout/xul/grid/examples/splitter.xul
new file mode 100644
index 0000000000..67946d4874
--- /dev/null
+++ b/layout/xul/grid/examples/splitter.xul
@@ -0,0 +1,40 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<!DOCTYPE window>
+
+
+<window orient="vertical" style="border: 2px solid green"
+ 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>
generated by cgit v1.2.3 (git 2.26.2) at 2024-11-13 13:10:37 +0000