<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="HideShowTesting" title="Hide/Show Testing" width="300" height="200"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
function checkPositions()
{
  // Get references to the hidden and collapsed labels
  var hidden=document.getElementById("hiddenLabel");
  var collapsed=document.getElementById("collapsedLabel");

  // Get the size of the hidden label using the width and height properties
  // of the boxObject. Use alert() to dispaly the size.
  var val="Size of hidden element: "+ hidden.boxObject.width+","+hidden.boxObject.height;
  alert(val);

  // Remove the hidden attribute so that the label appears.
  hidden.removeAttribute("hidden");

  // Get the size of the collapsed label.
  val="Size of collapsed element: "+ collapsed.boxObject.width+","+collapsed.boxObject.height; 
  alert(val);

  // Remove the collapsed attribute so that the label appears.
  collapsed.removeAttribute("collapsed");
  // or collapsed.collapsed = false;

  val="Size of collapsed element: "+ collapsed.boxObject.width+","+collapsed.boxObject.height;
  alert("again: " + val);
}
</script>

<button label="Check Positions" oncommand="checkPositions();"/>
<hbox>
<label id="hiddenLabel" hidden="true" value="aaa" style="background-color: #FFFF00;"/>
<label id="collapsedLabel" collapsed="true" value="bbbccc" style="background-color: #00FFFF;"/>
</hbox>
</window>