<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<body>
<p>Dynamic absolute positioning inside inline-relative container</p>
<div id="LIKEBODY" style="position:relative">
  <div id="CONTAIN" style="position:relative; display:inline">CONTAIN
      <div id="TARGET" style="position:absolute; right:0; top:0; width:20px; height:20px; background: green">T</div>
      THE TARGET
  </div>
</div>
<script>
let contain = document.querySelector('#CONTAIN');
let target = document.querySelector('#TARGET');
let likebody = document.querySelector('#LIKEBODY');

test(() => {
    let containRect = contain.getClientRects();
    let targetRect = target.getClientRects();
    assert_equals(containRect[0].right, targetRect[0].right, "#TARGET right aligns with #CONTAIN");
    assert_equals(containRect[0].top, targetRect[0].top, "#TARGET top aligns with #CONTAIN");
  }, "test0: initial #TARGET containing rect is #CONTAIN"
);

test(() => {
    contain.style.position = 'static';
    let likebodyRect = likebody.getClientRects();
    let targetRect = target.getClientRects();
    assert_equals(likebodyRect[0].right, targetRect[0].right, "#TARGET right aligns with #LIKEBODY");
    assert_equals(likebodyRect[0].top, targetRect[0].top, "#TARGET top aligns with #LIKEBODY");

  }, "test1: after relative->static, #TARGET containing rect is #LIKEBODY"
);

test(() => {
    contain.style.position = 'relative';
    let containRect = contain.getClientRects();
    let targetRect = target.getClientRects();
    assert_equals(containRect[0].right, targetRect[0].right, "#TARGET right aligns with #CONTAIN");
    assert_equals(containRect[0].top, targetRect[0].top, "#TARGET top aligns with #CONTAIN");
  }, "test2: after static->relative, #TARGET containing rect is #CONTAIN"
);
</script>