26eebd6ba843a13218c2128dd858676124982765
[WebKit-https.git] / LayoutTests / fast / css / list-item-text-align.html
1 <!DOCTYPE html>
2 <h3>
3 This test verifies that text-align:-webkit-match-parent is the default style for list elements.
4 </h3>
5
6 <div>
7 The test passes if all the lines containing the text "Left Align" are aligned to the left and vice-versa for "Right Align".
8 </div>
9
10 <ul dir=ltr>
11   <li dir=ltr class=l><span>Left aligned</span></li>
12   <li dir=rtl class=r><span>Right aligned</span></li>
13 </ul>
14
15 <ul dir=ltr style="text-align:start">
16   <li dir=ltr class=l>Left aligned</li>
17   <li dir=rtl class=l>Left aligned</li>
18 </ul>
19
20 <ul dir=ltr style="text-align:end">
21   <li dir=ltr class=r>Right aligned</li>
22   <li dir=rtl class=r>Right aligned</li>
23 </ul>
24
25 <ul dir=rtl style="text-align:start">
26   <li dir=ltr class=r>Right aligned</li>
27   <li dir=rtl class=r>Right aligned</li>
28 </ul>
29
30 <ul dir=rtl style="text-align:end">
31   <li dir=ltr class=l>Left aligned</li>
32   <li dir=rtl class=l>Left aligned</li>
33 </ul>
34
35 <ul dir=rtl style="text-align:left">
36   <li dir=ltr class=l>Left aligned</li>
37   <li dir=rtl class=l>Left aligned</li>
38 </ul>
39
40 <ul dir=rtl style="text-align:right">
41   <li dir=ltr class=r>Right aligned</li>
42   <li dir=rtl class=r>Right aligned</li>
43 </ul>
44
45
46 <script>
47 if (window.layoutTestController)
48     layoutTestController.dumpAsText();
49
50 // Checks that the given element is left aligned if expectedAlignment is 'left', or right aligned if
51 // expectedAlignment is 'right'.
52 function assertAlignment(enclosingListElement, i, expectedAlignment)
53 {
54     var computedStyle = window.getComputedStyle(enclosingListElement, null);
55     var leftAlign = expectedAlignment == 'left';
56
57     if (window.layoutTestController) {
58         if (computedStyle.textAlign == '-webkit-auto') {
59             // For the case of -webkit-auto check the offset of the text on screen
60             // rather than examining the computed style.
61             var elementLeftEdge = enclosingListElement.children[0].offsetLeft;
62             isLeftAligned = elementLeftEdge < document.body.clientWidth/2;
63             enclosingListElement.innerHTML = (leftAlign == isLeftAligned ? 'PASS' : 'FAIL');
64             return;
65         }
66         
67         if (leftAlign && computedStyle.textAlign == 'left')
68             enclosingListElement.innerHTML = 'PASS';
69         else if (!leftAlign && computedStyle.textAlign == 'right')
70             enclosingListElement.innerHTML = 'PASS';
71         else
72             enclosingListElement.innerHTML = 'FAIL';
73     }
74 }
75
76 // Actual test.
77 var leftAlignedDivs = document.querySelectorAll(".l");
78 for (var i = 0; i < leftAlignedDivs.length; i++)
79     assertAlignment(leftAlignedDivs[i], i, 'left');
80
81 var rightAlignedDivs = document.querySelectorAll(".r");
82 for (var i = 0; i < rightAlignedDivs.length; i++)
83     assertAlignment(rightAlignedDivs[i], i, 'right');
84
85 </script>