list-item-text-align.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/css/list-item-text-align.html
