<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DOM CSS: Computed Values of 'display'</title>
  <style type="text/css">

   /* display */
   .hide { display: none; }
   .block { display: block; }
   .inline { display: inline; }
   .table { display: table; }

   /* position */
   .relative { position: relative; }
   .absolute { position: absolute; }

   /* float */
   .left { float: left; }

   /* results */
   .pass { background: green; color: white; }
   .fail { background: red; color: yellow; }
   li { list-style-position: inside; }

  </style>
 </head>
 <body>

  <p>The following lines should all be green.</p>

  <div class="tests">
   <div class="hide">
    <span class="block" title="block"></span>
    <span class="inline" title="inline"></span>
    <span class="table" title="table"></span>
   </div>
   <div class="block">
    <span class="block" title="block"></span>
    <span class="inline" title="inline"></span>
    <span class="table" title="table"></span>
   </div>
   <div class="inline">
    <span class="block" title="block"></span>
    <span class="inline" title="inline"></span>
    <span class="table" title="table"></span>
   </div>
   <div class="block">
    <span class="left block" title="block"></span>
    <span class="left inline" title="block"></span>
    <span class="left table" title="table"></span> <!-- !!! -->
   </div>
   <div class="block">
    <span class="relative block" title="block"></span>
    <span class="relative inline" title="inline"></span>
    <span class="relative table" title="table"></span>
   </div>
   <div class="block">
    <span class="absolute block" title="block"></span>
    <span class="absolute inline" title="block"></span>
    <span class="absolute table" title="table"></span> <!-- !!! -->
   </div>
   <div class="block">
    <span class="left relative block" title="block"></span>
    <span class="left relative inline" title="block"></span>
    <span class="left relative table" title="table"></span> <!-- !!! -->
   </div>
   <div class="block">
    <span class="left absolute block" title="block"></span>
    <span class="left absolute inline" title="block"></span>
    <span class="left absolute table" title="table"></span> <!-- !!! -->
   </div>
  </div>


  <ol id="results">
  </ol>
  <script type="text/javascript">
   <![CDATA[
    var elements = document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'span');
    for (var index = 0; index < elements.length; index++) {
       var element = elements[index];
       var result = document.defaultView.getComputedStyle(element, '').getPropertyValue('display');
       var li = document.createElementNS('http://www.w3.org/1999/xhtml', 'li');
       li.appendChild(document.createTextNode(result));
       li.className = (result == element.title ? 'pass' : 'fail');
       document.getElementById('results').appendChild(li);
    }
   ]]>
  </script>

 </body>
</html>

<!--

If 'display' has the value 'none', user agents must ignore 'position'
and 'float'. In this case, the element generates no box.

Otherwise, 'position' has the value 'absolute' or 'fixed', 'display'
is set to 'block' and 'float' is set to 'none'. The position of the
box will be determined by the 'top', 'right', 'bottom' and 'left'
properties and the box's containing block.

Otherwise, if 'float' has a value other than 'none', 'display' is set
to 'block' and the box is floated.

Otherwise, the remaining 'display' properties apply as specified.

!!!: proposed errata: instead of setting display to block, it should
set it to the equivalent block-level type.

-->
