| <!DOCTYPE html> |
| <h3> |
| This test verifies that text-align:-webkit-match-parent is the default style for list elements. |
| </h3> |
| |
| <div> |
| The test passes if all the lines containing the text "Left Align" are aligned to the left and vice-versa for "Right Align". |
| </div> |
| |
| <ul dir=ltr> |
| <li dir=ltr class=l><span>Left aligned</span></li> |
| <li dir=rtl class=l><span>Left aligned although this li has dir=rtl because li's text-align is match-parent by default.</span></li> |
| </ul> |
| |
| <ul dir=ltr style="text-align:start"> |
| <li dir=ltr class=l>Left aligned</li> |
| <li dir=rtl class=l>Left aligned</li> |
| </ul> |
| |
| <ul dir=ltr style="text-align:end"> |
| <li dir=ltr class=r>Right aligned</li> |
| <li dir=rtl class=r>Right aligned</li> |
| </ul> |
| |
| <ul dir=rtl style="text-align:start"> |
| <li dir=ltr class=r>Right aligned</li> |
| <li dir=rtl class=r>Right aligned</li> |
| </ul> |
| |
| <ul dir=rtl style="text-align:end"> |
| <li dir=ltr class=l>Left aligned</li> |
| <li dir=rtl class=l>Left aligned</li> |
| </ul> |
| |
| <ul dir=rtl style="text-align:left"> |
| <li dir=ltr class=l>Left aligned</li> |
| <li dir=rtl class=l>Left aligned</li> |
| </ul> |
| |
| <ul dir=rtl style="text-align:right"> |
| <li dir=ltr class=r>Right aligned</li> |
| <li dir=rtl class=r>Right aligned</li> |
| </ul> |
| |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| // Checks that the given element is left aligned if expectedAlignment is 'left', or right aligned if |
| // expectedAlignment is 'right'. |
| function assertAlignment(enclosingListElement, i, expectedAlignment) |
| { |
| var computedStyle = window.getComputedStyle(enclosingListElement, null); |
| var leftAlign = expectedAlignment == 'left'; |
| |
| if (window.testRunner) { |
| if (computedStyle.textAlign == 'start') { |
| // For the case of -webkit-auto check the offset of the text on screen |
| // rather than examining the computed style. |
| var elementLeftEdge = enclosingListElement.children[0].offsetLeft; |
| isLeftAligned = elementLeftEdge < document.body.clientWidth/2; |
| enclosingListElement.innerHTML = (leftAlign == isLeftAligned ? 'PASS' : 'FAIL'); |
| return; |
| } |
| |
| if (leftAlign && computedStyle.textAlign == 'left') |
| enclosingListElement.innerHTML = 'PASS'; |
| else if (!leftAlign && computedStyle.textAlign == 'right') |
| enclosingListElement.innerHTML = 'PASS'; |
| else |
| enclosingListElement.innerHTML = 'FAIL'; |
| } |
| } |
| |
| // Actual test. |
| var leftAlignedDivs = document.querySelectorAll(".l"); |
| for (var i = 0; i < leftAlignedDivs.length; i++) |
| assertAlignment(leftAlignedDivs[i], i, 'left'); |
| |
| var rightAlignedDivs = document.querySelectorAll(".r"); |
| for (var i = 0; i < rightAlignedDivs.length; i++) |
| assertAlignment(rightAlignedDivs[i], i, 'right'); |
| |
| </script> |
