text-align-webkit-match-parent.html

<!DOCTYPE html>
<html>
<body>
<div id=test_body>
<h3>
  Test that verifies the behavior of text-align:-webkit-match-parent.
</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>

<h4>Cases where the outermost div is LTR.</h4>
<div style="text-align:start">
<div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
</div>

<div style="text-align:start" dir=ltr>
<div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
</div>

<div style="text-align:end" dir=ltr>
<div style="text-align:-webkit-match-parent" dir=rtl class=r><span>Right Aligned</span></div>
</div>

<h4>Cases where the outermost div is RTL.</h4>

<div style="text-align:start" dir=rtl>
<div style="text-align:-webkit-match-parent" dir=ltr class=r><span>Right Aligned</span></div>
</div>

<div style="text-align:end" dir=rtl>
<div style="text-align:-webkit-match-parent" dir=ltr class=l><span>Left Aligned</span></div>
</div>

<h4>Changing text-align programmatically</h4>

<div id=programmatic_change_div style="text-align:end" dir=ltr>
    <div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
</div>

<script>
var top_div = document.getElementById('programmatic_change_div');
top_div.style.setProperty('text-align', 'start', 'important');
</script>

<h4>check -webkit-match-parent in a nested div</h4>

<div style="text-align:end" dir=ltr>
  <div>
    <div style="text-align:-webkit-match-parent" dir=rtl class=r><span>Right Aligned</span></div>
  </div>
</div>

<div style="text-align:start" dir=ltr>
  <div style="text-align:-webkit-match-parent" dir=rtl>
    <div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
  </div>
</div>
</div>

<pre id="console">

<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'.
// Our check for right alignment is just !isLeftAligned at the moment, but this is
// enough for our purposes.
function assertAlignment(element, i, expectedAlignment)
{
    var enclosingDiv = element;
    var computedStyle = window.getComputedStyle(enclosingDiv, null);
    var innerSpan = enclosingDiv.children[0];
    var leftAlign = expectedAlignment == 'left';
    var isLeftAligned = (enclosingDiv.offsetLeft == innerSpan.offsetLeft);

    if (window.testRunner) {
        if (leftAlign && isLeftAligned && computedStyle.textAlign == 'left')
            innerSpan.innerHTML = 'PASS';
        else if (!leftAlign && !isLeftAligned && computedStyle.textAlign == 'right')
            innerSpan.innerHTML = 'PASS';
        else
            innerSpan.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>
</pre>

</body>
</html>
chromium/third_party/blink/web_tests/fast/css/text-align-webkit-match-parent.html
