third_party/WebKit/LayoutTests/fast/css/list-item-text-align.html

   1 <!DOCTYPE html>
   2 <h3>
   3 This test verifies that text-align:-webkit-match-parent is the default style for list elements.
   4 </h3>
   5
   6 <div>
   7 The test passes if all the lines containing the text "Left Align" are aligned to the left and vice-versa for "Right Align".
   8 </div>
   9
  10 <ul dir=ltr>
  11   <li dir=ltr class=l><span>Left aligned</span></li>
  12   <li dir=rtl class=l><span>Left aligned although this li has dir=rtl because li's text-align is match-parent by default.</span></li>
  13 </ul>
  14
  15 <ul dir=ltr style="text-align:start">
  16   <li dir=ltr class=l>Left aligned</li>
  17   <li dir=rtl class=l>Left aligned</li>
  18 </ul>
  19
  20 <ul dir=ltr style="text-align:end">
  21   <li dir=ltr class=r>Right aligned</li>
  22   <li dir=rtl class=r>Right aligned</li>
  23 </ul>
  24
  25 <ul dir=rtl style="text-align:start">
  26   <li dir=ltr class=r>Right aligned</li>
  27   <li dir=rtl class=r>Right aligned</li>
  28 </ul>
  29
  30 <ul dir=rtl style="text-align:end">
  31   <li dir=ltr class=l>Left aligned</li>
  32   <li dir=rtl class=l>Left aligned</li>
  33 </ul>
  34
  35 <ul dir=rtl style="text-align:left">
  36   <li dir=ltr class=l>Left aligned</li>
  37   <li dir=rtl class=l>Left aligned</li>
  38 </ul>
  39
  40 <ul dir=rtl style="text-align:right">
  41   <li dir=ltr class=r>Right aligned</li>
  42   <li dir=rtl class=r>Right aligned</li>
  43 </ul>
  44
  45
  46 <script>
  47 if (window.testRunner)
  48     testRunner.dumpAsText();
  49
  50 // Checks that the given element is left aligned if expectedAlignment is 'left', or right aligned if
  51 // expectedAlignment is 'right'.
  52 function assertAlignment(enclosingListElement, i, expectedAlignment)
  53 {
  54     var computedStyle = window.getComputedStyle(enclosingListElement, null);
  55     var leftAlign = expectedAlignment == 'left';
  56
  57     if (window.testRunner) {
  58         if (computedStyle.textAlign == 'start') {
  59             // For the case of -webkit-auto check the offset of the text on screen
  60             // rather than examining the computed style.
  61             var elementLeftEdge = enclosingListElement.children[0].offsetLeft;
  62             isLeftAligned = elementLeftEdge < document.body.clientWidth/2;
  63             enclosingListElement.innerHTML = (leftAlign == isLeftAligned ? 'PASS' : 'FAIL');
  64             return;
  65         }
  66
  67         if (leftAlign && computedStyle.textAlign == 'left')
  68             enclosingListElement.innerHTML = 'PASS';
  69         else if (!leftAlign && computedStyle.textAlign == 'right')
  70             enclosingListElement.innerHTML = 'PASS';
  71         else
  72             enclosingListElement.innerHTML = 'FAIL';
  73     }
  74 }
  75
  76 // Actual test.
  77 var leftAlignedDivs = document.querySelectorAll(".l");
  78 for (var i = 0; i < leftAlignedDivs.length; i++)
  79     assertAlignment(leftAlignedDivs[i], i, 'left');
  80
  81 var rightAlignedDivs = document.querySelectorAll(".r");
  82 for (var i = 0; i < rightAlignedDivs.length; i++)
  83     assertAlignment(rightAlignedDivs[i], i, 'right');
  84
  85 </script>