third_party/WebKit/LayoutTests/fast/css/text-align-webkit-match-parent.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <div id=test_body>
   5 <h3>
   6   Test that verifies the behavior of text-align:-webkit-match-parent.
   7 </h3>
   8
   9 <div>
  10 The test passes if all the lines containing the text "Left Align" are aligned to the left and vice-versa for "Right Align".
  11 </div>
  12
  13 <h4>Cases where the outermost div is LTR.</h4>
  14 <div style="text-align:start">
  15 <div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
  16 </div>
  17
  18 <div style="text-align:start" dir=ltr>
  19 <div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
  20 </div>
  21
  22 <div style="text-align:end" dir=ltr>
  23 <div style="text-align:-webkit-match-parent" dir=rtl class=r><span>Right Aligned</span></div>
  24 </div>
  25
  26 <h4>Cases where the outermost div is RTL.</h4>
  27
  28 <div style="text-align:start" dir=rtl>
  29 <div style="text-align:-webkit-match-parent" dir=ltr class=r><span>Right Aligned</span></div>
  30 </div>
  31
  32 <div style="text-align:end" dir=rtl>
  33 <div style="text-align:-webkit-match-parent" dir=ltr class=l><span>Left Aligned</span></div>
  34 </div>
  35
  36 <h4>Changing text-align programmatically</h4>
  37
  38 <div id=programmatic_change_div style="text-align:end" dir=ltr>
  39     <div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
  40 </div>
  41
  42 <script>
  43 var top_div = document.getElementById('programmatic_change_div');
  44 top_div.style.setProperty('text-align', 'start', 'important');
  45 </script>
  46
  47 <h4>check -webkit-match-parent in a nested div</h4>
  48
  49 <div style="text-align:end" dir=ltr>
  50   <div>
  51     <div style="text-align:-webkit-match-parent" dir=rtl class=r><span>Right Aligned</span></div>
  52   </div>
  53 </div>
  54
  55 <div style="text-align:start" dir=ltr>
  56   <div style="text-align:-webkit-match-parent" dir=rtl>
  57     <div style="text-align:-webkit-match-parent" dir=rtl class=l><span>Left Aligned</span></div>
  58   </div>
  59 </div>
  60 </div>
  61
  62 <pre id="console">
  63
  64 <script>
  65 if (window.testRunner)
  66     testRunner.dumpAsText();
  67
  68 // Checks that the given element is left aligned if expectedAlignment is 'left', or right aligned if
  69 // expectedAlignment is 'right'.
  70 // Our check for right alignment is just !isLeftAligned at the moment, but this is
  71 // enough for our purposes.
  72 function assertAlignment(element, i, expectedAlignment)
  73 {
  74     var enclosingDiv = element;
  75     var computedStyle = window.getComputedStyle(enclosingDiv, null);
  76     var innerSpan = enclosingDiv.children[0];
  77     var leftAlign = expectedAlignment == 'left';
  78     var isLeftAligned = (enclosingDiv.offsetLeft == innerSpan.offsetLeft);
  79
  80     if (window.testRunner) {
  81         if (leftAlign && isLeftAligned && computedStyle.textAlign == 'left')
  82             innerSpan.innerHTML = 'PASS';
  83         else if (!leftAlign && !isLeftAligned && computedStyle.textAlign == 'right')
  84             innerSpan.innerHTML = 'PASS';
  85         else
  86             innerSpan.innerHTML = 'FAIL';
  87     }
  88 }
  89
  90 // Actual test.
  91 var leftAlignedDivs = document.querySelectorAll(".l");
  92 for (var i = 0; i < leftAlignedDivs.length; i++)
  93     assertAlignment(leftAlignedDivs[i], i, 'left');
  94
  95 var rightAlignedDivs = document.querySelectorAll(".r");
  96 for (var i = 0; i < rightAlignedDivs.length; i++)
  97     assertAlignment(rightAlignedDivs[i], i, 'right');
  98
  99 </script>
 100 </pre>
 101
 102 </body>
 103 </html>