<?xml version="1.0"?> <!-- -*- Mode: SGML; indent-tabs-mode: nil c-basic-offset: 2 -*- -->
<!--

The test exercises creation and removal of HTML elements.

-->

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

<window xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <html:script>
  var open = false;

  function toggleOpenClose()
  {
    var container = document.getElementById('container');

    if (open) {
      // close
      dump("\n\n\n\nCLOSING\n\n");
      container.removeChild(container.firstChild);
    }
    else {
      // open
      dump("\n\n\n\nOPENING\n\n");
      var frame = document.createElement('box');
      frame.setAttribute('align', 'vertical');
      frame.setAttribute('style', 'width: 50px; height: 50px; background: red;');
      container.insertBefore(frame, container.firstChild);
    }

    open = !open;
  }
  </html:script>


  <html:button onclick="toggleOpenClose();" flex="100%">Add/Remove Red Element At 0</html:button>
  The order should stay 'blue, green, yellow'.

  <box id="container" align="horizontal" style="height: 100%; width: 100%;" flex="100%">
    <box align="vertical" style="width: 50px; height: 50px; background: blue;" />
    <box align="vertical" style="width: 50px; height: 50px; background: green;" />
    <box align="vertical" style="width: 50px; height: 50px; background: yellow;" />
  </box>
</window>
