Elements with transformations are not considered containing blocks for absolute position elements

[mrobinson]

Consider the following test case:

<style>
  div {
    height: 200px;
    width: 200px;
  }
</style>
<div style="position: relative; background: red;">
  <div style="transform: translateX(-100px);">
    <div style="position: absolute; right: -100px; background: green;">
    </div>
  </div>
</div>

The transformed div should be the containing block for the innermost absolutely positioned element, but it isn't. This leads to a mispositioning of the green div -8 pixels on the x axis. The -8 pixels is the amount that would normally move the div relative to the viewport, but instead it should be relative to the transformed div and have no offset at all on the x axis.

[mrobinson]

cc @pcwalton @kvark

[mrobinson]

I split out the issue with fixed position elements to #18122, because it will require a more extensive and completely different fix than for absolute blocks.