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