OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <title>Bug 85856: Test if WebKit can show the left side of the inner elements re
gardless of the position of its scrollbars. To test manually, open this document
and verify we can see "ABC" both in the LTR element and in the RTL element.</ti
tle> |
3 <head> | 3 <script src="../../resources/testharness.js"></script> |
4 <title>Bug 85856</title> | 4 <script src="../../resources/testharnessreport.js"></script> |
5 <script src="../../resources/js-test.js"></script> | |
6 </head> | |
7 <body dir="ltr" style="-webkit-writing-mode: vertical-rl;"> | 5 <body dir="ltr" style="-webkit-writing-mode: vertical-rl;"> |
8 <div dir="ltr" id="outer-ltr" style="width: 200px; height: 200px; overflow: scro
ll;"> | 6 <div dir="ltr" id="outer-ltr" style="width: 200px; height: 200px; overflow: scro
ll;"> |
9 <div id="inner-ltr" style="text-align: left; width: 300px; height: 300px;">ABC</
div> | 7 <div id="inner-ltr" style="text-align: left; width: 300px; height: 300px;">ABC</
div> |
10 </div> | 8 </div> |
11 <div dir="rtl" id="outer-rtl" style="width: 200px; height: 200px; overflow: scro
ll;"> | 9 <div dir="rtl" id="outer-rtl" style="width: 200px; height: 200px; overflow: scro
ll;"> |
12 <div id="inner-rtl" style="text-align: left; width: 300px; height: 300px;">ABC</
div> | 10 <div id="inner-rtl" style="text-align: left; width: 300px; height: 300px;">ABC</
div> |
13 </div> | 11 </div> |
14 <script type="text/javascript"> | 12 <script> |
15 description('Test if WebKit can show the left side of the inner elements regardl
ess of the position of its scrollbars. To test manually, open this document and
verify we can see "ABC" both in the LTR element and in the RTL element.'); | 13 test(function() { |
| 14 var outerLTR = document.getElementById("outer-ltr"); |
| 15 var innerLTR = document.getElementById("inner-ltr"); |
| 16 var outerRTL = document.getElementById("outer-rtl"); |
| 17 var innerRTL = document.getElementById("inner-rtl"); |
| 18 outerLTR.scrollLeft = 0; |
| 19 outerRTL.scrollLeft = 0; |
16 | 20 |
17 var outerLTR = document.getElementById('outer-ltr'); | 21 // Verify the widths of the outer RTL elements are the same as the widths of
the outer LTR elements. |
18 var innerLTR = document.getElementById('inner-ltr'); | 22 assert_equals(outerLTR.offsetWidth, outerRTL.offsetWidth); |
19 var outerRTL = document.getElementById('outer-rtl'); | 23 assert_equals(outerLTR.clientWidth, outerRTL.clientWidth); |
20 var innerRTL = document.getElementById('inner-rtl'); | 24 assert_equals(outerLTR.scrollWidth, outerRTL.scrollWidth); |
21 outerLTR.scrollLeft = 0; | |
22 outerRTL.scrollLeft = 0; | |
23 | 25 |
24 debug('Verify the widths of the outer RTL elements are the same as the widths of
the outer LTR elements.'); | 26 // Verify the widths of the inner RTL elements are the same as the widths of
the inner LTR elements. |
25 shouldBeTrue('outerLTR.offsetWidth == outerRTL.offsetWidth'); | 27 assert_equals(innerLTR.offsetWidth, innerRTL.offsetWidth); |
26 shouldBeTrue('outerLTR.clientWidth == outerRTL.clientWidth'); | 28 assert_equals(innerLTR.clientWidth, innerRTL.clientWidth); |
27 shouldBeTrue('outerLTR.scrollWidth == outerRTL.scrollWidth'); | 29 assert_equals(innerLTR.scrollWidth, innerRTL.scrollWidth); |
28 | 30 |
29 debug('Verify the widths of the inner RTL elements are the same as the widths of
the inner LTR elements.'); | 31 // Verify the width of the vertical scrollbar of the outer RTL element is th
e same as the one of the outer LTR element regardless of their scrollbar positio
ns. |
30 shouldBeTrue('innerLTR.offsetWidth == innerRTL.offsetWidth'); | 32 var scrollbarWidthLTR = outerLTR.offsetWidth - outerLTR.clientWidth; |
31 shouldBeTrue('innerLTR.clientWidth == innerRTL.clientWidth'); | 33 var scrollbarWidthRTL = outerRTL.offsetWidth - outerRTL.clientWidth; |
32 shouldBeTrue('innerLTR.scrollWidth == innerRTL.scrollWidth'); | 34 assert_equals(scrollbarWidthLTR, scrollbarWidthRTL); |
33 | 35 }); |
34 debug('Verify the width of the vertical scrollbar of the outer RTL element is th
e same as the one of the outer LTR element regardless of their scrollbar positio
ns.'); | |
35 var scrollbarWidthLTR = outerLTR.offsetWidth - outerLTR.clientWidth; | |
36 var scrollbarWidthRTL = outerRTL.offsetWidth - outerRTL.clientWidth; | |
37 shouldBeTrue('scrollbarWidthLTR == scrollbarWidthRTL'); | |
38 </script> | 36 </script> |
39 </body> | 37 </body> |
40 </html> | |
OLD | NEW |