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