| <!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> |
| |
| |
