title: webkit rtl absolute position bug?
body: <p>html:</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;div id="inner"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#outer {
      position: absolute;
      left: 100px;
      top: 0;
      width: 100px;
      height: 100px;
      direction: rtl;
      background-color: blue;
  }
  #inner {
      display: inline-block;
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: yellow;
  }
  </code></pre>
  
  <p>In Chrome, the yellow box is outside of the blue box.</p>
  
  <p>In other browers(firefox, IE), the yellow box is inside the blue box.</p>
  
  <p>Is it a bug of webkit, and why?</p>
  
  <p>a test case on jsfiddle:
  <a href="http://jsfiddle.net/QF9tT/" rel="nofollow">http://jsfiddle.net/QF9tT/</a></p>