scrollbars/rtl/div-absolute.html

<!DOCTYPE html>
<html>
<head>
<title>Bug 91756</title>
<script src="../../fast/js/resources/js-test-pre.js"></script>
<style>
div.outer { overflow: auto; width: 100px; position: relative; height: 100px; border: solid; }
div.inner { position: absolute; top: 250px; }
</style>
</head>
<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 type="text/javascript">
description('Test if the widths of RTL elements are the same as the widths of the LTR elements when they include absolutely-positioned children.');

debug('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');
shouldBeTrue('outerLTR.offsetWidth == outerRTL.offsetWidth');
shouldBeTrue('outerLTR.clientWidth == outerRTL.clientWidth');
shouldBeTrue('outerLTR.scrollWidth ==  outerRTL.scrollWidth');

debug('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');
shouldBeTrue('innerLTR.offsetWidth == innerRTL.offsetWidth');
shouldBeTrue('innerLTR.clientWidth == innerRTL.clientWidth');
shouldBeTrue('innerLTR.scrollWidth ==  innerRTL.scrollWidth');
</script>
<script src="../../fast/js/resources/js-test-post.js"></script>
</body>
</html>