| <!DOCTYPE html> |
| <style> |
| #container { |
| position: relative; |
| font: 10px Ahem; |
| } |
| #abs { |
| position: absolute; |
| border: solid 4px red; |
| } |
| .inline-pos { |
| top: 4px; |
| } |
| .right { |
| right: -12px; |
| } |
| .block-pos { |
| bottom: -12px; |
| right: 4px; |
| } |
| .inline { |
| display: inline; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| </head> |
| </style> |
| <script src="../../../resources/check-layout.js"></script> |
| <body> |
| <p>An abspos element should move with the edge of its inline relpos container when the latter changes width.</p> |
| <div> |
| <div> |
| <span id="container"><span id="text">Hello</span><div id="abs" class="inline-pos right" data-total-x=118></div></span> |
| </div> |
| <div> |
| <span id="container"><span id="inline-text">Hello</span><div id="abs" class="inline inline-pos right" data-total-x=118></div></span> |
| </div> |
| </div> |
| <div class="rtl"> |
| <div> |
| <span id="container"><span id="text-rtl">Hello</span><div id="abs" class="inline-pos right" data-total-x=118></div></span> |
| </div> |
| <div> |
| <span id="container"><span id="inline-text-rtl">Hello</span><div id="abs" class="inline inline-pos right" data-total-x=118></div></span> |
| </div> |
| </div> |
| <script> |
| document.body.offsetTop; |
| document.getElementById('text').innerHTML = 'hello world'; |
| document.getElementById('text-rtl').innerHTML = 'hello world'; |
| document.getElementById('inline-text').innerHTML = 'hello world'; |
| document.getElementById('inline-text-rtl').innerHTML = 'hello world'; |
| checkLayout('#abs') |
| </script> |
| </body> |
| </html> |
