103 lines
3.1 KiB
HTML
103 lines
3.1 KiB
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> |