div-absolute.html | Explore in Territory

<!DOCTYPE html>
<title>Bug 91756: Test if the widths of RTL elements are the same as the widths of the LTR elements when they include absolutely-positioned children.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
div.outer { overflow: auto; width: 100px; position: relative; height: 100px; border: solid; }
div.inner { position: absolute; top: 250px; }
</style>
<body>
<div id="outerLTR" class="outer"><div id="innerLTR" class="inner" style="left: 200px;">foo</div></div>
<div id="outerRTL" class="outer" style="direction: rtl;"><div id="innerRTL" class="inner" style="right: 200px;">foo</div>
</div>
<script>
test(function() {
    // Verify the widths of the outer RTL element are the same as the widths of the outer LTR element.
    var outerLTR = document.getElementById("outerLTR");
    var outerRTL = document.getElementById("outerRTL");
    assert_equals(outerLTR.offsetWidth, outerRTL.offsetWidth);
    assert_equals(outerLTR.clientWidth, outerRTL.clientWidth);
    assert_equals(outerLTR.scrollWidth, outerRTL.scrollWidth);

    // Verify the widths of the inner RTL element are the same as the widths of the inner LTR element.
    var innerLTR = document.getElementById("innerLTR");
    var innerRTL = document.getElementById("innerRTL");
    assert_equals(innerLTR.offsetWidth, innerRTL.offsetWidth);
    assert_equals(innerLTR.clientWidth, innerRTL.clientWidth);
    assert_equals(innerLTR.scrollWidth, innerRTL.scrollWidth);
    });
</script>
</body>
chromium/third_party/blink/web_tests/scrollbars/rtl/div-absolute.html
