<?xml version="1.0"?> 
<?xml-stylesheet href="resource:/res/samples/xul.css" type="text/css"?> 

<!DOCTYPE window> 

<window style="height: 100%; width: 100%;" 
xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

<hbox style="background-color: white; height: 100%; width: 100%">
    <!-- scroll bar -->
	<scrollbar orient="vertical"/>

    <spacer style="width: 10px"/>

    <!-- scroll bar with NeXt button order-->
	<scrollbar orient="vertical">
		<slider flex="100%"/>
		<scrollbarbutton class="decrement"/>
		<scrollbarbutton class="increment"/>
	</scrollbar>

    <spacer style="width: 10px"/>

    <!-- fixed thumb and different increments -->
    <scrollbar orient="vertical" curpos="50" pageIncrement="20" increment="5" flex="100%">
		<scrollbarbutton class="decrement"/>
		<slider flex="100%">
		   <thumb value="this is it" flex="0%"/>
		</slider>
		<scrollbarbutton class="increment"/>
	</scrollbar>

    <spacer style="width: 10px"/>

   <!-- scrollbar with table in it -->
   <scrollbar orient="vertical" curpos="50" pageIncrement="20" increment="5" >
		<scrollbarbutton class="decrement"/>
		<slider flex="100%">
		   <html:button width="100%">
			   <html:table width="100%" border="1">
				 <html:tr>
					<html:td bgcolor="blue">
					   cell1
					</html:td>
					<html:td bgcolor="red">
					   cell2
					</html:td>
				 </html:tr>
				  <html:tr>
				   <html:td bgcolor="red">
					   cell4
					</html:td>
					<html:td bgcolor="blue">
					   cell5
					</html:td>
				 </html:tr>
			   </html:table>
			</html:button>
		</slider>
		<scrollbarbutton class="increment"/>
	</scrollbar>
</hbox>

</window>

