third_party/WebKit/LayoutTests/scrollbars/rtl/div-absolute.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Bug 91756</title>
   5 <script src="../../resources/js-test.js"></script>
   6 <style>
   7 div.outer { overflow: auto; width: 100px; position: relative; height: 100px; border: solid; }
   8 div.inner { position: absolute; top: 250px; }
   9 </style>
  10 </head>
  11 <body>
  12 <div id="outerLTR" class="outer"><div id="innerLTR" class="inner" style="left: 200px;">foo</div></div>
  13 <div id="outerRTL" class="outer" style="direction: rtl;"><div id="innerRTL" class="inner" style="right: 200px;">foo</div>
  14 </div>
  15 <script type="text/javascript">
  16 description('Test if the widths of RTL elements are the same as the widths of the LTR elements when they include absolutely-positioned children.');
  17
  18 debug('Verify the widths of the outer RTL element are the same as the widths of the outer LTR element.');
  19 var outerLTR = document.getElementById('outerLTR');
  20 var outerRTL = document.getElementById('outerRTL');
  21 shouldBeTrue('outerLTR.offsetWidth == outerRTL.offsetWidth');
  22 shouldBeTrue('outerLTR.clientWidth == outerRTL.clientWidth');
  23 shouldBeTrue('outerLTR.scrollWidth ==  outerRTL.scrollWidth');
  24
  25 debug('Verify the widths of the inner RTL element are the same as the widths of the inner LTR element.');
  26 var innerLTR = document.getElementById('innerLTR');
  27 var innerRTL = document.getElementById('innerRTL');
  28 shouldBeTrue('innerLTR.offsetWidth == innerRTL.offsetWidth');
  29 shouldBeTrue('innerLTR.clientWidth == innerRTL.clientWidth');
  30 shouldBeTrue('innerLTR.scrollWidth ==  innerRTL.scrollWidth');
  31 </script>
  32 </body>
  33 </html>