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

   /* tests */
   tests { width: 200px; position: relative; padding: 0; display: block; }
   [id="1"] { /* auto */ }
   [id="2"] { position: absolute; /* auto -> 0 */ }
   [id="3"] { position: absolute; width: 50px; right: 0; /* auto -> 150px */ }
   [id="4"] { position: absolute; width: 50px; right: 0; left: inherit; /* inherit -> auto -> 150px */ }
   [id="5"] { position: absolute; width: 50px; left: 50%; /* 50% of 200px -> 100px */ }
   [id="6"] { position: absolute; left: 10px; /* 10px */ }

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

  </style>
  <script type="text/javascript">
   <![CDATA[

    function addResult(result, correct, list) {
       var li = document.createElementNS('http://www.w3.org/1999/xhtml', 'li');
       li.appendChild(document.createTextNode('\''));
       li.appendChild(document.createTextNode(result));
       li.appendChild(document.createTextNode('\' should equal \''));
       li.appendChild(document.createTextNode(correct));
       li.appendChild(document.createTextNode('\''));
       li.className = (result == correct ? 'pass' : 'fail');
       document.getElementById(list).appendChild(li);
    }

    function test() {
      var property = 'left'; /* just change this */
      var elements = document.getElementsByTagNameNS('http://tests.example.org/', 'test');
      for (var index = 0; index < elements.length; index++) {
         var element = elements[index];

         /* as text */
         addResult(document.defaultView.getComputedStyle(element, '').getPropertyValue(property), 
                   element.getAttribute('value'), 'results1');

         /* as a CSS value */
         var result = 'n/a';
         try {
            result = document.defaultView.getComputedStyle(element, '').getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_PX);
         } catch(ex) { }
         addResult(result, element.getAttribute('pixels'), 'results2');

      }
    }
   ]]>
  </script>
 </head>
 <body onload="test()">

  <tests xmlns="http://tests.example.org/">
   <test id="1" value="auto" pixels="n/a"/> <!-- yes, n/a can come out as an answer, look at the script -->
   <test id="2" value="0" pixels="0"/>
   <test id="3" value="150px" pixels="150"/>
   <test id="4" value="150px" pixels="150"/>
   <test id="5" value="100px" pixels="100"/>
   <test id="6" value="10px" pixels="10"/>
  </tests>

  <ol id="results1"/>
  <ol id="results2"/>

 </body>
</html>
