<!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>